問題
Flexboxを使って枠線の中に縦で並んでいる「赤色の円」「黄色の円」「青色の円」を横に並べてください。
See the Pen css individual work flexbox q1 by miyagit (@miyagit) on CodePen.
[ 見本 ]
解答
解答コード
HTML
1
2
3
4
5
<div class="signal">
<div class="red"></div>
<div class="yellow"></div>
<div class="blue"></div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.signal {
display: flex;
border: 1px solid;
width: 150px;
}
.red {
width: 50px;
height: 50px;
background-color: red;
border-radius: 9999px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
border-radius: 9999px;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
border-radius: 9999px;
}
解説
Flexboxを使って要素を横並びにするには、要素を配置させるための「Flexコンテナ」という領域を作る必要がありましたね。
Flexコンテナを作るには、Flexboxを使って配置したい領域の要素に対して、display: flex を指定する必要があります。
各信号の要素をFlexboxを使って配置したいので、その親要素の .signal 要素に display: flex を指定しましょう。
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.signal {
display: flex;
border: 1px solid;
width: 150px;
}
.red {
width: 50px;
height: 50px;
background-color: red;
border-radius: 9999px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
border-radius: 9999px;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
border-radius: 9999px;
}
.signal 要素に display: flex を指定させたことで、その子要素は横並びになりましたね。
「Flexコンテナ」の 子要素は自動的に「Flexアイテム」になる ため、横並びになるわけです。
横並びさせたい要素の親要素のdisplayプロパティ値をflexにすると覚えておこう！
この記事で学んだことをTwitterに投稿して、アウトプットしよう！
Twitterの投稿画面に遷移します