はじめてのFlex Box

Flex boxを順を追って導入してみよう

記事キーワード
, , , , ,

掲載日:2019年5月30日


はじめに

Hello World!、なべのみと申します。今回はFlex Boxについて説明いたします。

FlexBoxとはCSS3から実装されたFlexible Box Layout Moduleです。主要なブラウザ―は全て実装されておりまして、どんな効果があるのかと言いますとブロック要素を簡単に左右に振り分けてレイアウトしたり、ブロック要素の順番を好きな順番に入れ替えて表示させたりすることができるものです。

似たようなプロパティに「float」プロパティと言うものがあり、こちらも要素を左右に振り分ける事が出来るという意味では同様のプロパティですが、デメリットとして隣接するブロック要素に対してレイアウト崩壊を引き起こしてしまいます。この現象を「回り込み」といいます。

この回り込みを解消するためには「clear」プロパティをいうものをその隣接したブロック要素に記述する必要があり、右寄せした要素に対して右、左寄せしたものに対して左、という指示をする必要があります。結論から申しますととても不便です。理由は都度隣接した要素に対してclearプロパティを指示する必要があるからです。

そこで今回は、「回り込み」が発生しないFlex Boxについての記述方法と各記述による違いについて説明したいと思います。(ちなみに値にはいくつか種類があります)

①まずはFlexコンテナとFlexアイテムを用意しよう

それでは簡単な設定からいきましょう。

まずはじめにグレー色ボックスの中に3つのbox1~3を並べます。3つのboxには幅と高さにそれぞれ200pxを指定してみます。

box1
box2
box3

この段階で3つのボックスが縦に並ぶ理由は分かりますか?box1~3の横幅が指定されると横方向の余ったスペースは自動的にbox1~3のそれぞれの余白(margin)が割り当てられます。下のボックスが横にすぐ回り込まない理由はこれです。ここは基本的なことではありますが、margin領域を確認したい方はこのページの開発者ツールを見てみましょう。例えばGoogleChromeの開発者ツールであればmarginはオレンジ色の領域で表示されますので確認してみてください。

②さっそく親要素に「display: flex;」を与えよう

さあここからが本題ですね。親要素に「display: flex;」を与えましょう。結果は以下です。

box1
box2
box3

グレー背景のボックスには「display: flex;」を与えています。この指示により親要素はFlexコンテナとなり、3つの子要素はflexアイテムとなりました。

この状態はまさに子要素にfloatプロパティleftを与えた状態と同じですね。しかしレイアウトは崩れていません。これがFlexBoxの魅力です。

レイアウト崩壊を気にせずにブロック要素を横に並べられるなんて素敵ですよね。

しかしこれでは3つのboxが余すことなく詰まった状態で並んでいます。次はこれを均等に並べて更に綺麗に配置してみましょう。

③box1~3を均等に並べてみよう

同じく親要素に次は「justify-content: space-between;」というプロパティと値を追加しました。結果は以下です。

box1
box2
box3

ご覧の通り、最初と最後のboxは端々に寄り、真ん中のbox2は中央に自動的に配置されました。

この「display: flex;」「justify-content: space-between;」の2つを親要素に与えるだけでその子要素は綺麗に均等配置してくれるのです!

“え、最初と最後のブロックは端に詰めずに左右にも余白を均等に分けて表示してみたいのですか?”

それでは次は各ブロックの左右にも余白を与えつつ均等に配置していきましょう。

④最後に左右にも余白を与えよう

それでは今度は親要素に与えている「justify-content: space-between;」を修正し、”space-between” ⇒ “space-around”に変更してみましょう。結果は以下です。

box1
box2
box3

いかがでしょうか。こう見ると1つ前ののべったい見た目の配置から見て変わり、いかにも均等に配置しました、という感じですよね。この配置ができるだけでも綺麗な横並びが実現します。

おわりに

今回は初めての方の導入をメインにFlexBoxをご紹介させていただきましたが、実は設定できる値は他にもあります。ですがこのページでは今回はここまでといたします。

今度また続きのページを更新しますので引き続き今後もご覧いただけたらと思います。

ありがとうございました。

なべのみ