CSS FlexboxとはCSS 3から導入されたレイアウトモジュールです。正式名称は『CSS Flexible Box Laout』です。
Flexboxを活用することでボックスレイアウトが簡単に実装できます。
特に横並びの配置に関しては従来のfloatよりもFlexboxのほうが簡単に実装できるので、横並びの配置ではFlexboxを積極的に活用していくとよいでしょう。
そこで今回はFlexboxを利用して横並びのレイアウトを実装する方法について紹介します。
具体的には、横並びの配置のなかでもよく目にする『3つのカード状のアイテムを画面中央に均等に配置する』というレイアウトを実装します。
- 今回のゴール
- Flexboxの概要について理解する
- 中央寄せ横並びレイアウトをFlexboxで実装する方法を理解する
- center、space-around、space-betweenの違いについて理解する
Flexboxの利用方法
display: flexをブロック要素に適用することで要素内をFlexboxとして扱えます。
Flexboxに作成されたブロック要素はFlexboxの設定値によって配置位置が決定されます。
Flexboxはjustify-contentという主軸とalign-itemsという交差軸の2つの軸によって構成されています。
初期設定ではjustify-contentは水平方向の、align-itemsは垂直方向の配置位置を制御するプロパティとなっています。
Flexboxで横並びにアイテムを配置する方法
『アイテムを横に並べる』は水平方向に関する配置なのでjustify-contentを利用します。
justify-contentプロパティには様々な設定値が用意されています。
justify-contentの設定値の中でも今回実装する『3つのカード状のアイテムを画面中央に均等に配置する』というレイアウトでは以下の3つがよく利用されます。
- 中央横並びのレイアウトでよく利用される設定値
- center
- space-around
- space-between
『200pxのアイテムを20px間隔で配置する』というレイアウトをそれぞれの設定値を利用して実装したサンプルを用意しました。
上からcenter、specec-arpund、space-betweenです。
利用している設定値は異なりますがアイテムの配置位置はどれも同じであることがわかります。
See the Pen fixed-centered-patterns by Toshiharu Nishina (@nishina555) on CodePen.
以下では設定値ごとの実装方法について紹介します。
『justify-content: center』の場合
justify-content: centerを利用するとアイテムがFlexboxの中央に寄ります。
中央に寄ったアイテム間にはスペースが存在しないため、間隔をあけてアイテムを配置する場合は別途marginを指定します。
以下にjustify-content: centerを利用したサンプルを用意しました。
Flexbox自身を画面の中央に配置するためdisply: flexだけでなくmargin: 0 autoも適用させています。（ 参考: 【CSS】text-align・marginの中央ぞろえチェックポイントまとめ）
See the Pen fixed-with-center by Toshiharu Nishina (@nishina555) on CodePen.
このように、justify-content: centerの場合はアイテム幅とアイテム同士の間隔さえ決めれば簡単に中央寄せを実装できます。
『justify-content: space-around』の場合
justify-content: space-aroundを利用するとFlexboxに均等にアイテムが配置されます。
このとき、Flexboxの両端にも『アイテム同士の間隔』の半分の幅の余白が用意されます。
つまりjustify-content: space-aroundでは、widthとmarginの定義されたアイテムを配置するレイアウトが実装できます。
以下にjustify-content: space-aroundを利用したサンプルを用意しました。
See the Pen fixed-with-space-around by Toshiharu Nishina (@nishina555) on CodePen.
justify-content: space-aroundの場合アイテム同士の間隔は、アイテム幅として利用されてないFlexboxの余白から自動で計算されます。
ですのでjustify-content: space-aroundを利用して中央寄せにする場合、アイテム幅とアイテム同士の間隔が決まっているのであればFlexboxのwidthは逆算して設定する必要があります。
例えば今回の場合ですと、アイテム幅200px・アイテム同士の間隔20pxのレイアウトを作成したかったためFlexboxのwidthは逆算して660pxとしています。
『justify-content: space-between』の場合
justify-content: space-betweenを利用するとFlexboxに均等にアイテムが配置されます。justify-content: space-aroundとは違い、Flexboxの両端に余白はできません。
以下にjustify-content: space-betweenを利用したサンプルを用意しました。
See the Pen fixed-with-space-between by Toshiharu Nishina (@nishina555) on CodePen.
justify-content: space-betweenもjustify-content: space-around同様、アイテム同士の間隔はFlexboxの余りから自動で計算されるので逆算してFlexboxのwidthを用意する必要があります。
まとめ
以上でFlexboxを利用した横並びレイアウトの実装方法の紹介を終わります。
- 今回のまとめ
display: flexを適用したブロック要素内がFlexboxとなる- Flexboxのレイアウトは主軸（
justify-content）と交差軸（align-items）の2つによって構成されている - Flexboxによる横に並びのレイアウトは水平方向（初期設定における主軸）の設定を利用する
centerで中央寄せをする際はアイテム同士の間隔を設計する必要があるspace-between・space-aroundで中央寄せをする際はFlexboxのwidthを設計する必要がある
なお今回紹介した横並びのレイアウトはFlexboxが固定長です。
画面幅に応じてFlexboxを変更することでレスポンシブなレイアウトになります。
レスポンシブな横並びのレイアウトをFlexboxで実装する方法については横並びレイアウトをCSS Flexboxでレスポンシブ対応する方法で紹介していますのでこちらをご覧になってください。
Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです！
