ログイン
問題12

display flexで要素を横並びにしよう

CSSでは要素を簡単に横並びにする方法として、フレックスボックスというものがあります。親要素にフレックスボックスを指定することで、全ての子要素を横並びにすることができます。 フレックスボックスを指定するには、CSSでdisplayプロパティの値にflexを指定します。

アイコン画像

本のアイコンdisplayプロパティとは

displayプロパティとは、要素の表示形式を指定するCSSのプロパティです。
ブロックレベル要素をインライン要素にしたり、インライン要素をブロックレベル要素にしたりすることができます。
また、ブロック要素とインライン要素の特徴を併せ持ったインラインブロックという指定を行なうこともできます。

displayプロパティを使って頻繁に使用されるのは上記のような指定以外にも、フレックスボックスの指定に多く使われています。
様々な値が用意されているプロパティなので、しっかり覚えておきましょう。

本のアイコンflex box(フレックスボックス)とは

flex box(フレックスボックス)とは、CSSのレイアウト技法で、HTMLブロックを横並びにすることができます。
フレックスボックスを適用させる場合は、適用させたい要素にdisplay: flex;を記述します。

注意点は、横並びにしたい要素の親要素にdisplay: flex;をあてるという点です。
display: flex;をあてられた要素はコンテナ要素なり、子要素がflexアイテムとなります。
すなわち横並びになる要素は子要素のみで、孫要素には適用されないということです。
間違えやすい部分なのでしっかり覚えておきましょう。

CSSの問題に挑戦しよう!

以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、CSSマスターへの道の第一歩となるでしょう。

問題12: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¥
              

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

              .boxs {
  display: flex;
}
¥CSS¥
            

コメントのアイコン解説

要素を横並びにするには、横並びにしたい要素の親要素にdisplay flexを指定します。
今回はboxsが親要素に当たるので、boxsにdisplay: flex;を指定すればOKです。
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする

LINE登録で、Web制作に役立つコンテンツ配信中‼

LINEの友達追加でお役立ち動画をGET!!
LINEの友達追加でお役立ち動画をGET!!