teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問flexboxの子要素を親要素のちょうど三等分にしたい

編集履歴

質問編集履歴

1

SCSS表記のほかに通常のCSSのコードも追加しました。

2020/05/06 07:23

投稿

chifflot
chifflot

スコア11

test CHANGED
File without changes
test CHANGED
@@ -92,97 +92,191 @@
92
92
 
93
93
 
94
94
 
95
+ ```SCSS
96
+
97
+ *{
98
+
99
+ margin:0;
100
+
101
+ padding:0;
102
+
103
+ }
104
+
105
+
106
+
107
+
108
+
109
+ .point1{
110
+
111
+ width: 1200px;
112
+
113
+ margin: 0 auto;
114
+
115
+ &__break{
116
+
117
+ width: 100px;
118
+
119
+ height: 2px;
120
+
121
+ border: 1px solid black;
122
+
123
+ margin: auto;
124
+
125
+ }
126
+
127
+ &__title{
128
+
129
+ text-align: center;
130
+
131
+ font-size: 60px;
132
+
133
+ font-weight: bold;
134
+
135
+ }
136
+
137
+
138
+
139
+ &__steps{
140
+
141
+ display: flex;
142
+
143
+ width: 1200px;
144
+
145
+ list-style: none;
146
+
147
+ &__block{
148
+
149
+ width: 400px;
150
+
151
+ box-sizing: border-box;
152
+
153
+ .steps__title{
154
+
155
+ font-size: 23px;
156
+
157
+ font-weight: bold;
158
+
159
+ margin:20px 0 20px 0;
160
+
161
+ }
162
+
163
+ .steps__host-check{
164
+
165
+ margin-top: 20px;
166
+
167
+ a{
168
+
169
+ color: green;
170
+
171
+ text-decoration: none;
172
+
173
+ }
174
+
175
+ a:hover{
176
+
177
+ text-decoration: underline;
178
+
179
+ }
180
+
181
+ }
182
+
183
+ }
184
+
185
+ }
186
+
187
+ }
188
+
189
+ ```
190
+
191
+
192
+
95
193
  ```CSS
96
194
 
97
- *{
98
-
99
- margin:0;
100
-
101
- padding:0;
102
-
103
- }
104
-
105
-
106
-
107
-
108
-
109
- .point1{
110
-
111
- width: 1200px;
112
-
113
- margin: 0 auto;
114
-
115
- &__break{
116
-
117
- width: 100px;
118
-
119
- height: 2px;
120
-
121
- border: 1px solid black;
122
-
123
- margin: auto;
124
-
125
- }
126
-
127
- &__title{
128
-
129
- text-align: center;
130
-
131
- font-size: 60px;
132
-
133
- font-weight: bold;
134
-
135
- }
136
-
137
-
138
-
139
- &__steps{
140
-
141
- display: flex;
142
-
143
- width: 1200px;
144
-
145
- list-style: none;
146
-
147
- &__block{
148
-
149
- width: 400px;
150
-
151
- box-sizing: border-box;
152
-
153
- .steps__title{
154
-
155
- font-size: 23px;
156
-
157
- font-weight: bold;
158
-
159
- margin:20px 0 20px 0;
160
-
161
- }
162
-
163
- .steps__host-check{
164
-
165
- margin-top: 20px;
166
-
167
- a{
168
-
169
- color: green;
170
-
171
- text-decoration: none;
172
-
173
- }
174
-
175
- a:hover{
176
-
177
- text-decoration: underline;
178
-
179
- }
180
-
181
- }
182
-
183
- }
184
-
185
- }
195
+ * {
196
+
197
+ margin: 0;
198
+
199
+ padding: 0;
200
+
201
+ }
202
+
203
+
204
+
205
+ .point1 {
206
+
207
+ width: 1200px;
208
+
209
+ margin: 0 auto;
210
+
211
+ }
212
+
213
+ .point1__break {
214
+
215
+ width: 100px;
216
+
217
+ height: 2px;
218
+
219
+ border: 1px solid black;
220
+
221
+ margin: auto;
222
+
223
+ }
224
+
225
+ .point1__title {
226
+
227
+ text-align: center;
228
+
229
+ font-size: 60px;
230
+
231
+ font-weight: bold;
232
+
233
+ }
234
+
235
+ .point1__steps {
236
+
237
+ display: flex;
238
+
239
+ width: 1200px;
240
+
241
+ list-style: none;
242
+
243
+ }
244
+
245
+ .point1__steps__block {
246
+
247
+ width: 400px;
248
+
249
+ box-sizing: border-box;
250
+
251
+ }
252
+
253
+ .point1__steps__block .steps__title {
254
+
255
+ font-size: 23px;
256
+
257
+ font-weight: bold;
258
+
259
+ margin: 20px 0 20px 0;
260
+
261
+ }
262
+
263
+ .point1__steps__block .steps__host-check {
264
+
265
+ margin-top: 20px;
266
+
267
+ }
268
+
269
+ .point1__steps__block .steps__host-check a {
270
+
271
+ color: green;
272
+
273
+ text-decoration: none;
274
+
275
+ }
276
+
277
+ .point1__steps__block .steps__host-check a:hover {
278
+
279
+ text-decoration: underline;
186
280
 
187
281
  }
188
282