Flexboxレイアウトの配置を徹底解説【初心者向け】

本記事ではFlexboxの各プロパティを用いることで、どんな風に要素が配置されるのかを解説していきます。

この記事を読むことで、Flexboxの各プロパティの使い方の基礎が理解できるようになります。

ぜひ最後までご覧ください。

Flexboxとは

Flexboxとは「Flexible Box Layout Module」の略で、その名前の通り柔軟なボックスレイアウトを可能にするものです。

Flexboxは親要素にdisplay: flex;（インライン要素であれば、display: inline-flex;）を記述することで、フレックスコンテナとして使えるようになり、コンテナの中に子要素を作ります。

Flexboxではフレックスコンテナ（flex-container）とフレックスアイテム（flex-item）に分類されます。

Flexboxはコンテナとアイテムで構成されていることを理解した上で、コンテナで使われるプロパティとアイテムで使われるプロパティを見ていきましょう。

コンテナで使われるプロパティ

コンテナで使われるプロパティは以下のようになります。

それぞれのプロパティの使い方とアイテムがどのように配置されるのかを解説していきます。

flex-direction

flex-directionはアイテムの並び順（配置する順番）を指定できるプロパティです。

flex-directionが取れる値は、以下の4つになります。

flex-direction: row;

flex-direction: row;はデフォルトで設定された値で、アイテムが水平方向に左から右に配置されます。

flex-direction: row-reverse;

flex-direction: row-reverse;はアイテムが水平方向に右から左に配置されます。

flex-direction: column;

flex-direction: column;はアイテムが垂直方向に上から下に配置されます。

flex-direction: column-reverse;

flex-direction: column-reverse;はアイテムが垂直方向に下から上に配置されます。

flex-wrap

flex-wrapはアイテムの折り返しを指定できるプロパティです。

flex-wrapが取れる値は、以下の3つになります。

flex-wrap: nowrap;

flex-wrap: nowrap;はデフォルトで設定された値で、アイテムを折り返さないで一列に配置されます。

flex-wrap: wrap;

flex-wrap: wrap;は複数行（2列以上）のアイテムを上から下に配置されます。

flex-wrap: wrap-reverse;

flex-wrap: wrap-reverse;は複数行（2列以上）のアイテムを下から上に配置されます。

flex-flow

flex-flowはアイテムの並び順（配置する順番）とアイテムの折り返しを指定できるプロパティです。

flex-flowはflex-directionとflex-wrapを一括で指定できます。

flex-flowの記述方法は、以下のようになります。

justify-content

justify-contentは水平方向でアイテムの位置を指定できるプロパティです。

justify-contentで取れる値は、以下の5つになります。

justify-content: flex-start;

justify-content: flex-start;はデフォルトの値であり、アイテムを左揃えで配置されます。

justify-content: flex-end;

justify-content: flex-endはアイテムを右揃えで配置されます。

justify-content: center;

justify-content: center;はアイテムを左右中央揃えで配置されます。

justify-content: space-between;

justify-content: space-between;は両端のアイテムは余白を空けずに、両端以外のアイテムを均等に間隔を空けて配置されます。

justify-content: space-around;

justify-content: space-around;は全てのアイテム（両端を含む）を均等に間隔を開けて配置されます。

align-items

align-itemsはアイテムの垂直方向の位置を指定できるプロパティです。

align-itemsが取れる値は、以下の5つになります。

align-items: stretch;

align-items: stretch;はデフォルトの値であり、アイテムを上下の余白を埋めて配置されます。

align-items: flex-start;

align-items: flex-start;はアイテムを上に揃えて配置されます。

align-items: flex-end;

align-items: flex-end;はアイテムを下に揃えて配置されます。

align-items: center;

align-items: center;はアイテムを上下中央に揃えて配置されます。

align-items: baseline;

align-items: baseline;はアイテムをベースラインに合わせて配置されます。

align-content

align-contentはアイテムの垂直方向の位置を指定できるプロパティです。

align-contentが取れる値は、以下の6つになります。

align-content: stretch;

align-content: stretch;はアイテムの行を余白を埋めるように配置されます。

align-content: flex-start;

align-content: flex-start;はアイテムの行を上に揃えて配置されます。

align-content: flex-end;

align-content: flex-end;はアイテムの行を下に揃えて配置されます。

align-content: center;

align-content: center;はアイテムの行を上下中央に揃えて配置されます。

align-content: space-between;

align-content: space-between;は一番上の行と一番下の行のアイテムを余白を空けないで配置し、他のアイテムの行は均等に間隔を空けて配置されます。

align-content: space-around;

align-content: space-around;はすべてのアイテムの行が均等に間隔を空けて配置されます。

アイテムで使われるプロパティ

アイテムで使われるプロパティは以下のようになります。

それぞれのプロパティの使い方について見ていきましょう。

order

orderはアイテムの並び順を指定することができるプロパティです。

アイテムの1つ1つにorderを指定すると、HTMLの記述する順を無視して要素の並び順を指定することができます。

flex-grow

flex-growはアイテムのサイズを指定するプロパティです。

flex-growでは数値を指定することで、アイテムの伸び率や大きさを指定することができます。

flex-shrink

flex-shrinkはアイテムの縮み率を指定することができるプロパティです。

flex-shrinkはflex-growと対照的にアイテムの縮み率、小ささを指定することができます。

flex-basis

flex-basisは、アイテムの基本幅を指定することができるプロパティです。

flex

flexは、flex-growとflex-shrink、flex-basisの3つの値をまとめて指定できるプロパティです。

flexの書き方は以下のようになります。

align-self

align-selfでは、アイテムの垂直方向の位置を指定できるプロパティです。

vertical-alignは使えないので、注意が必要です。

コンテナでalign-itemsを使って垂直方向の位置を指定することができるが、アイテムにalign-selfが指定されてた場合はalign-selfが優先されます。

align-selfが取れる値は以下の6つになります。

まとめ

いかがだったでしょうか？

今回はFlexboxの各プロパティの使い方を理解することはできたでしょうか？

Flexboxが使いこなせるとCSSのハードルが下がると言っても言い過ぎではありません。

プログラミングは受験勉強や学校の定期テストと違ってカンペが使えるので、忘れたときに調べて自己解決できるレベルまで反復練習をするようにしましょう。