基本コーダーのOWIEです。
ブラウザサポートの幅が広がり、カラム振りにスタンダードだったfloatからFlexboxに移行する機会が多くなってきました。とはいえ、リバース社内でも「使ってみたけど思う通りの挙動をしてくれない」「floatの方がわかりやすい」という声がチラホラ。
そこで入門編（１）として「まずはボックスを横に並べてみよう」というテーマで解説していきます。カラム振りだけでなく、便利な要素がたくさんあるFlexbox、これを機にお近づきになりましょう。
【基本】display: flex;は親に付与する
floatは左右に振りたいボックスに直接付与していましたが、display: flex;は親に付与します。付与すると子は幅や内容など関係なく横並びになり、「どういう条件で横並びにするか」という設定で挙動が変化していきます。
実際の挙動
See the Pen flexbox_beginner by owie (@owie) on CodePen.
※ RUN PENをクリック
どうでしょうか。floatをクリアする必要が無いため、コードがスッキリしています。
１．BOXを用意する
- #box_parent（親）
- #box_child_a（子どもA）
- #box_child_b（子どもB）
まず#box_parent（親）にdisplay: flex;を付与すると、#box_child_Nが強制的に横並びになります。
２．条件を付与する
display: flex;を付与した親に以下の条件を加えます。
- flex-wrap: wrap; …折り返しあり
- justify-content: space-between; …均等配置
折り返しさせる「flex-wrap: wrap;」
子どもA〜Bの合計幅が100%を超えた時に折り返し、いわゆるカラム落ちが発生します。設定しない場合、中身に応じて100%の幅に収まります。
※ 場合によりこの条件は使わない場合があります。
均等配置させる「justify-content: space-between;」
均等配置する時に便利な要素です。子どもA〜Bの幅が50%未満の場合、Aが左、Bが右に配置されます。
centerやspace-aroundなどもありますが、ひとまず今回はspace-betweenだけを覚えましょう。
float／flexbox、どちらがよいのか
floatのLRでカラムを振るのも良いですが、均等配置やレスポンシブに対応する場合などはやはりコードは少ないほうがシンプルでわかりやすいです。
ちなみに上記の例をfloatで実現する場合は下記になります。
See the Pen flex_float_beginner by owie (@owie) on CodePen.
※ RUN PENをクリック
ただCSS3への過渡期でもあるため、floatでカラム振りが必要な状況もあります。出来ることなら2つの方法を使い分けれたらGOODではないでしょうか。
横並びのまとめ
Flexboxを使って横並びにする手順は以下の通り。
- 親boxにdisplay: flex;を付与する
- flexの条件を付与する
- 子boxにwidthを指定する
以上です。
今回は均等のカラム振りだけにスポットを当てましたが、2.の「条件を付与する」によっては順番を指定できるorder: N;や上下のセンタリングをしてくれるalign-items: center;など、目からウロコが落ちるような要素が控えています。
今回のポストでFlexboxと近づくことができたら直近で使えそうな要素から掘っていくのが近道ではないでしょうか。
ちなみにゲーム感覚でFlexboxを学べるサイトもありますので、そちらを紹介して今回の解説はおしまいです。ではまた。
【FLEXBOX FROGGY】http://flexboxfroggy.com/#ja
