問題
12display flexで要素を横並びにしよう
CSSでは要素を簡単に横並びにする方法として、フレックスボックスというものがあります。親要素にフレックスボックスを指定することで、全ての子要素を横並びにすることができます。 フレックスボックスを指定するには、CSSでdisplayプロパティの値にflexを指定します。
CSSの問題に挑戦しよう！
問題
「display flexで要素を横並びにしよう」
boxsの中に入っているboxを全て横並びで表示させてください。
あらかじめエディタに書くコード
<div class="boxs">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
¥HTML¥
.box {
width: 100px;
height: 100px;
background: white;
border: 1px solid black;
}
¥CSS¥
期待する画面
解答と解説（display flexで要素を横並びにしよう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
要素を横並びにするには、横並びにしたい要素の親要素にdisplay flexを指定します。
今回はboxsが親要素に当たるので、boxsにdisplay: flex;を指定すればOKです。
ポイント
displayプロパティとは
displayプロパティとは、要素の表示形式を指定するCSSのプロパティです。
ブロックレベル要素をインライン要素にしたり、インライン要素をブロックレベル要素にしたりすることができます。
また、ブロック要素とインライン要素の特徴を併せ持ったインラインブロックという指定を行なうこともできます。
displayプロパティを使って頻繁に使用されるのは上記のような指定以外にも、フレックスボックスの指定に多く使われています。
様々な値が用意されているプロパティなので、しっかり覚えておきましょう。
flex box（フレックスボックス）とは
flex box（フレックスボックス）とは、CSSのレイアウト技法で、HTMLブロックを横並びにすることができます。
フレックスボックスを適用させる場合は、適用させたい要素にdisplay: flex;を記述します。
注意点は、横並びにしたい要素の親要素にdisplay: flex;をあてるという点です。
display: flex;をあてられた要素はコンテナ要素なり、子要素がflexアイテムとなります。
すなわち横並びになる要素は子要素のみで、孫要素には適用されないということです。
間違えやすい部分なのでしっかり覚えておきましょう。
