CSS Flexboxによる中央寄せ横並びレイアウトの実装3パターン比較

こんにちは。Enjoy IT Life管理人の仁科(@nishina555)です。

CSS FlexboxとはCSS 3から導入されたレイアウトモジュールです。正式名称は『CSS Flexible Box Laout』です。

Flexboxを活用することでボックスレイアウトが簡単に実装できます。
特に横並びの配置に関しては従来のfloatよりもFlexboxのほうが簡単に実装できるので、横並びの配置ではFlexboxを積極的に活用していくとよいでしょう。

そこで今回はFlexboxを利用して横並びのレイアウトを実装する方法について紹介します。

具体的には、横並びの配置のなかでもよく目にする『3つのカード状のアイテムを画面中央に均等に配置する』というレイアウトを実装します。

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つがよく利用されます。

『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の中央ぞろえチェックポイントまとめ

2020年8月1日

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を利用した横並びレイアウトの実装方法の紹介を終わります。

なお今回紹介した横並びのレイアウトはFlexboxが固定長です。
画面幅に応じてFlexboxを変更することでレスポンシブなレイアウトになります。

レスポンシブな横並びのレイアウトをFlexboxで実装する方法についてはレスポンシブな横並びレイアウトをCSS Flexboxで実装する方法で紹介していますのであわせてご覧になってください。

レスポンシブな横並びレイアウトをCSS Flexboxで実装する方法

2020年8月7日

この記事がいいなと思いましたらTwitter(@nishina555)のフォローもよろしくお願いします！