【CSSフレックスボックス】display:flex;の使い方と効かない時のチェックポイント

今回は、display:flex;の基本レイアウトやプロパティの使い方、CSSが効かない時のチェックポイントについてまとめました。

フレックスボックスは、上下左右のレイアウトに簡単かつ柔軟に対応できるので、レスポンシブデザインやグリッドレイアウトにおいて、大いに役立つCSSレイアウト技法のひとつです。学習中の方やdisplay:flex;が効かないと困っている方は、ぜひこの記事をご参考ください。

display: flex;の基本レイアウトとモバイルファーストなレスポンシブ対応

flexboxを使ってレイアウトしたい場合は、通常、ボックスを囲むフレックスコンテナーと呼ばれる親要素の中に、フレックスアイテムと呼ばれる子要素を囲む形になります。基本的には、レイアウトを変更したいブロック要素のひとつ上の階層に「display: flex;」を指定します。

今回はボタンを3つ用意し、それらを囲むコンテナー要素としてbtn-itemsクラスを持つdivを設けました。

ここでは、よく使う基本レイアウトについて順にみていきます。

初期状態

flexboxを使用する前の初期状態です。

コンテナー要素であるbtn-itemsに対して何も指定していない状態では、ボタンは積み重なるように縦並びの配置となっています。

See the Pen btn01 by gainadesign (@gaina-design) on CodePen.

横並び（display: flex;）

初期状態から、ボタンを横並びにします。

ひとつ上の階層であるコンテナー要素（btn-items）に「display: flex;」を指定します。

See the Pen btn04 by gainadesign (@gaina-design) on CodePen.

横並びになりました。

表示結果を0.25xにすると分かりますが、単にdisplay: flex;を指定した状態では、アイテムは左揃えになっています。

横並び＋左右中央揃え（justify-content: center;）

次に、横並びにしたアイテムを左右中央揃えに配置します。

コンテナー要素（btn-items）に、「justify-content: center;」を追加します。

See the Pen btn02 by gainadesign (@gaina-design) on CodePen.

再び表示結果を0.25xにすると、左右中央揃えになっていることが確認できます。

横並び＋均等配置（justify-content: space-between;）

つづいて、Webサイトのグローバルナビゲーション見られるような横並び＋均等配置のレイアウトです。

コンテナー要素（btn-items）のjustify-contentの値をspace-betweenに変更します。

See the Pen btn05 by gainadesign (@gaina-design) on CodePen.

表示結果を0.25xにすると、最初と最後のアイテムが端に寄っています。同じ横並びですが、各アイテムを均等配置し、最初のアイテムは先頭に、最後のアイテムは末尾に寄せられています。

レスポンシブ対応とフレックスボックス（モバイルファーストの場合）

さらに、モバイルファーストでのflexboxコーディングの例をご紹介します。

モバイルファーストとは

モバイルファーストとは、Webサイトやネットサービスなどの開発・運営方針の一つで、スマートフォンなどの携帯端末向けをパソコン向けなどより先に、あるいは同時に公開すること。また、サイトやアプリの機能や表示、操作方法を設計する際に、携帯端末での使いやすさを常に優先すること。

IIT用語辞典 e-Words

flexboxについて学習していると、パソコン用レイアウトをベースとして、モバイル時のレイアウトをメディアクエリ（@media）で上書きしていくコーディング手法をよく見かけます。

しかし、スマートフォンやタブレット端末が浸透している今、モバイル端末への負荷なども考慮して、モバイルファーストなWebサイト設計が主流となってきています。

そのため、モバイルファースト方式でのコーディングにも慣れておいた方が良いでしょう。

レスポンス対応時のflexboxレイアウト（左右中央揃え）

先ほどのボタンをモバイルファースト方式で、

• モバイルでは、縦並び左右中央揃え
• PCでは、横並び左右中央揃え

とレスポンシブ対応にしたい場合、以下のように書くことができます。

See the Pen btn03 by gainadesign (@gaina-design) on CodePen.

CSSのコードをざっくり説明すると、

1. コンテナー要素（btn-items）にdisplay:flex;を指定
2. モバイル時は縦並びなので、flex-directionをcolumnとする
3. 縦並び時の左右中央揃えはalign-itemsで指定
4. メディアクエリで幅が一定以上でflex-directionをrowに指定
5. 横並び時の左右中央揃えは、justify-contentで指定

となります。表示倍率を切り替えると、1xでは縦並び左右中央揃え、0.25xでは横並び左右中央揃えとなっていることが確認できます。

flexboxの軸と位置調整について

上記レイアウトでは、左右中央の位置揃えについてjustify-contentやalign-itemsを使って指定しました。

特に、flexboxレイアウトを用いてレスポンシブ対応する際、パソコン用とモバイル用のどちらをベースのレイアウトにするかで、メディアクエリを含めプロパティの値指定が異なってきます。

そのため、それぞれのプロパティにどの値を指定すればよいか分からなくなってしまい、思うようにスタイルが効かないことがよくあります。（私もよく混乱します。。。）

そこで、ここでは、flexboxの軸と位置調整の基本的な考え方について説明したいと思います。（具体的な向きや位置の調整は次のセクションにまとめました。）

flexboxレイアウトにおいて、スタイルが上手く効かない時は、これから説明する軸方向とプロパティの値を誤っていることがよくあります。以下を読んで、主軸方向と指定するプロパティの値が適切か、もう一度確認してみてください。

flex-directionで主軸の方向を決める

flexboxには、軸という概念があり、「主軸」と「交差軸」に分かれます。

flexが指定された子要素は主軸に沿って並びます。

そして、主軸の方向や向きを指定するのがflex-directionプロパティです。

flex-directionがcolumnの場合・・・主軸が縦方向に
flex-directionがrowの場合・・・主軸が横方向に

なお、display:flex;のみを指定した場合、flex-directionの初期値はrowとなっているため、アイテムは左から横方向に並びます。（前のセクションで、横並びレイアウトの時にflex-directionを指定していないのは、初期値がrowだからです。）

justify-contentとalign-itemsで上下左右の位置を揃える

flex-directionによって決められた主軸の方向に基づいて、justify-contentプロパティとalign-itemsプロパティでアイテムの位置を揃えます。それぞれのプロパティの役割は以下の通りです。

justify-content →主軸方向の位置を揃える
align-items→交差軸方向の位置を揃える

そのため、フレックスコンテナーの主軸が縦方向か横方向かによって、justify-contentとalign-itemsによる上下左右の位置の揃え方が変わります。

以上を理解した上で、flex-directionやjustify-content/align-itemsプロパティの値を変更して、フレックスボックスで向きや位置を調整してみましょう。

flex-directionでアイテムが並ぶ方向を指定する

flex-directionプロパティは、主軸の方向や向き (通常または逆方向) を指定することにより、アイテムが並ぶ方向を設定することができます。

flex-directionで指定できる値は、row（初期値）やcolumnの他に、以下のようなものがあります。

row-reverse

row-reverseは、rowと逆方向に横並びます。

See the Pen btn06 by gainadesign (@gaina-design) on CodePen.

ボタンが右から1→2→3と並んでいます。

column-reverse

column-reverseは、columnと逆方向にアイテムが縦並びます。

See the Pen Untitled by gainadesign (@gaina-design) on CodePen.

ボタンが下から1→2→3と並んでいます。

justify-contentとalign-itemsでアイテムの位置を指定する

フレックスボックスにおいて、justify-contentプロパティは、フレックスコンテナーの主軸方向のアイテム配置を指定できます。反対に、align-itemsプロパティは、交差軸方向のアイテム配置を指定します。

ここでは、使用頻度の高いjustify-contentプロパティで主に使用する値を挙げてみましたので、配置を比較してみてください。（いずれのデモの表示倍率0.25xを推奨します。なお、align-itemsで使用する値については、MDNのサイトで確認できます。）

justify-contentの値

center

コンテナーの中央に向けて互いに寄せて配置。

See the Pen btn08 by gainadesign (@gaina-design) on CodePen.

space-between

最初と最後のアイテムを両端寄せ。残りの余白をアイテム同士の間隔に均等に分配。

See the Pen btn05 by gainadesign (@gaina-design) on CodePen.

space-around

両端とアイテム余白が、隣接するアイテム同士の間隔の半分。アイテム同士の間隔は均等。

See the Pen btn09 by gainadesign (@gaina-design) on CodePen.

display: flex;のスタイルが上手く効かない時のチェックポイント

最後に、フレックスボックスのスタイルが上手く効かない時のチェックポイントです。やみくもに値を変えて挙動を確認するのもいいですが、ぜひもう一度チェックしてみてください。

• 適用したいアイテム（子要素）のひとつ上の階層（親要素）にdisplay: flex;を指定しているか？
• 主軸の方向とプロパティは適切か？
• display:block;などで上書きしていないか？

適用したいアイテム（子要素）のひとつ上の階層（親要素）にdisplay: flex;を指定しているか？

display: flex;は、親要素のすぐ下の要素のにのみ効きます。いつの間にか階層が深くなって、display: flex;を指定した親要素の直下には、ひとつしか要素がない場合などは、効きません。

主軸の方向とプロパティは適切か？

主軸が縦方向か横方向かで、配置を指定するプロパティが異なります。

display:blockなどで上書きしていないか？

display:flex;を指定した後に、他のレイアウトを調整の関係でdisplay:block;などに上書きされていないか確認しましょう。

まとめ

いかがでしたか？

紹介したプロパティの値以外にも興味がある方は、MDNドキュメントなどを読んでいただき、ぜひ他の値などについても検証してみてください。

レスポンシブ対応が必須である今、柔軟かつ簡潔にレイアウトを組めるflexboxはWebサイト制作には欠かせません。

これら基本的な使い方をしっかりと理解することで、カードレイアウトやサイト全体のレイアウトなどを作る時など、フレックスボックスを使って、スムーズに思い通りのレイアウトがコーディングできるようになるといいですね！