問題

12
CSS

display 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で要素を横並びにしよう)

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用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アイテムとなります。
すなわち横並びになる要素は子要素のみで、孫要素には適用されないということです。
間違えやすい部分なのでしっかり覚えておきましょう。

さらにスキルアップしたい方は公式LINEから「CSS」と送信すると動画が見れます。

LINE登録して動画を視聴する
あなたに合った学習プランは? 適正コース診断