ナビゲーションメニューを横並びにしたい、要素を上下左右中央に揃えたい、カードを均等な間隔で並べたい——こうしたレイアウトの悩みの多くは、CSS Flexboxで解決できます。かつては float や display:table を組み合わせた回りくどい方法が必要でしたが、Flexboxなら数行のCSSで実現できます。

この記事では MDN Web Docs の仕様をベースに、Flexboxの基本概念から実践的なレイアウトパターンまでを解説します。手を動かして試したい場合は、Flexbox ジェネレーターを使うとスライダー操作でリアルタイムにプレビューしながらCSSコードを生成できます。アカウント不要・無料で利用できます。

目次

• Flexboxの基本概念
• flex-direction：主軸の方向を決める
• justify-content：主軸方向の揃え
• align-items：交差軸方向の揃え
• flex-wrap：折り返しの制御
• flex-grow / flex-shrink / flex-basis：アイテムの伸縮
• 実践レイアウトパターン
  • パターン1：ヘッダーナビゲーション（ロゴ左・メニュー右）
  • パターン2：カード一覧の均等配置
  • パターン3：完全中央揃え
  • パターン4：フッターを常にページ下部に固定
• FlexboxとGridの使い分け
• ジェネレーターで視覚的に試す
• まとめ

Flexboxの基本概念

Flexboxは要素を1次元方向（横または縦）に並べるためのレイアウトモジュールです。親要素に display:flex を指定すると、その直下の子要素が「フレックスアイテム」として並びます。

.container {
  display: flex;
}

Flexboxを理解するうえで重要なのが、次の2つの軸です。

• 主軸（main axis）: アイテムが並ぶ方向。デフォルトは横方向
• 交差軸（cross axis）: 主軸に対して垂直な方向。デフォルトは縦方向

主軸方向の揃えは justify-content、交差軸方向の揃えは align-items で制御します。この2軸の関係を押さえておくと、以降のプロパティの動きが理解しやすくなります。

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

flex-direction は主軸をどちら向きにするかを指定します。

.container {
  display: flex;
  flex-direction: row; /* 既定値：左から右 */
}

値	並び方
row	左から右（既定値）
row-reverse	右から左
column	上から下
column-reverse	下から上

flex-direction を column に切り替えると、主軸が縦方向になります。このとき justify-content と align-items が制御する軸も入れ替わる点に注意が必要です。

/* 縦並びレイアウト */
.stack {
  display: flex;
  flex-direction: column;
}

justify-content：主軸方向の揃え

justify-content はアイテムを主軸方向にどう配置するかを指定します。

.container {
  display: flex;
  justify-content: space-between;
}

値	動き
flex-start	主軸の始点に寄せる（既定値）
flex-end	主軸の終点に寄せる
center	中央に寄せる
space-between	両端に寄せ、間隔を均等にする
space-around	各アイテムの周囲に均等な余白を作る
space-evenly	アイテム間・両端の余白をすべて均等にする

space-between と space-around の違いは、両端の余白の扱いです。space-between は両端のアイテムを端にぴったり揃えますが、space-around は両端にもアイテム間の半分の余白ができます。space-evenly はその余白の非対称性をなくし、すべての間隔を揃えます。

align-items：交差軸方向の揃え

align-items はアイテムを交差軸方向にどう配置するかを指定します。

.container {
  display: flex;
  align-items: center;
}

値	動き
stretch	交差軸方向いっぱいに引き伸ばす（既定値）
flex-start	交差軸の始点に揃える
flex-end	交差軸の終点に揃える
center	中央に揃える
baseline	テキストのベースラインで揃える

高さが異なる画像やアイコンをテキストと並べるとき、align-items: baseline を使うと文字のベースライン基準で綺麗に揃います。

flex-wrap：折り返しの制御

デフォルトでは、Flexboxのアイテムはコンテナの幅に収まらなくても1行に詰め込まれ、はみ出したり縮んだりします。折り返しを許可するには flex-wrap を指定します。

.container {
  display: flex;
  flex-wrap: wrap;
}

値	動き
nowrap	折り返さない（既定値）
wrap	折り返す
wrap-reverse	逆順で折り返す

flex-direction と flex-wrap をまとめて指定できる flex-flow というショートハンドもあります（例: flex-flow: row wrap;）。

flex-grow / flex-shrink / flex-basis：アイテムの伸縮

この3つは各アイテムがどう伸び縮みするかを制御します。個別に指定することもできますが、flex というショートハンドでまとめて指定するのが一般的です。

.item {
  flex: 1 1 auto; /* flex-grow flex-shrink flex-basis */
}

• flex-grow: 余白があるときにアイテムがどれだけ伸びるかの比率（既定値は0＝伸びない）
• flex-shrink: 幅が足りないときにアイテムがどれだけ縮むかの比率（既定値は1＝縮む）
• flex-basis: 伸縮計算の基準となるアイテムの初期サイズ（既定値はauto）

比率で指定した数値は「他のアイテムとの相対値」です。たとえば2つのアイテムに flex-grow: 1 と flex-grow: 2 を指定すると、余った幅を1:2の比率で分配します。

/* サイドバー固定幅・メインエリアが余白を埋める */
.sidebar {
  flex: 0 0 240px; /* 伸びず縮まず240px固定 */
}
.main {
  flex: 1 1 auto; /* 残りの幅をすべて埋める */
}

flex: 1 という書き方もよく見かけますが、これは flex: 1 1 0% の省略形で、アイテムの元のサイズを無視して余白を均等に分配します。

実践レイアウトパターン

パターン1：ヘッダーナビゲーション（ロゴ左・メニュー右）

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

justify-content: space-between でロゴとメニューを両端に配置し、align-items: center で高さのずれをなくします。ヘッダーレイアウトの定番の組み合わせです。

パターン2：カード一覧の均等配置

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card {
  flex: 1 1 240px; /* 240pxを基準に、余白があれば伸びる */
}

flex-wrap: wrap で画面幅が足りなくなったら折り返し、flex-basis を基準サイズにすることでレスポンシブなカードグリッドが作れます。gap プロパティでアイテム間の余白を指定すると、marginの調整なしに均等な間隔になります。

パターン3：完全中央揃え

.center-box {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

justify-content と align-items を両方 center にするだけで、子要素を水平・垂直の両方向で中央に配置できます。モーダルやローディング画面など、要素を1つだけ中央に置きたいときに使います。

パターン4：フッターを常にページ下部に固定

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.main-content {
  flex: 1 1 auto; /* コンテンツが少なくても余白を埋める */
}

ページ全体を縦方向のFlexコンテナにし、メインコンテンツに flex: 1 1 auto を指定すると、コンテンツが短いページでもフッターが画面下部に張り付きます。「Sticky Footer」と呼ばれる定番パターンです。

FlexboxとGridの使い分け

FlexboxとCSS Gridはどちらもレイアウト用のモジュールですが、得意な場面が異なります。

	Flexbox	Grid
次元	1次元（横 or 縦）	2次元（行と列を同時に）
得意な用途	ナビゲーション、ボタン群、コンテンツに応じて伸縮する並び	ページ全体のグリッドレイアウト、行と列を厳密に揃えたい表組み

「アイテムを1方向に並べて、余ったスペースをコンテンツに応じて分配したい」場合はFlexbox、「行と列を両方きっちり定義してレイアウトしたい」場合はGridを選ぶのが基本方針です。実際のページでは、外枠をGridで組み、その中の個々のコンポーネント（カード内の要素配置など）をFlexboxで組むという併用もよく行われます。

ジェネレーターで視覚的に試す

プロパティの組み合わせを手で書きながら確認するのは手間がかかります。Flexbox ジェネレーターでは:

• flex-direction / justify-content / align-items / flex-wrap をボタン操作で切り替え
• 各アイテムの flex-grow / flex-shrink / flex-basis を個別に調整
• 変更内容をリアルタイムにプレビュー
• 生成されたCSSコードをCSS・HTML・Tailwind CSSの3形式でワンクリックコピー

パラメータを切り替えながら実際の見た目を確認し、気に入った設定のコードをそのままコピーして使えます。

まとめ

プロパティ	役割
display: flex	フレックスコンテナを作る
flex-direction	主軸の方向（row/column）
justify-content	主軸方向の揃え
align-items	交差軸方向の揃え
flex-wrap	折り返しの許可
flex-grow / flex-shrink / flex-basis	各アイテムの伸縮比率

Flexboxは「主軸」と「交差軸」という2軸の考え方さえ押さえれば、あとは justify-content と align-items の組み合わせでほとんどのレイアウトが作れます。まずは Flexbox ジェネレーター で実際に値を動かしながら、動きを体感してみてください。

---

参考文献

• Basic concepts of flexbox - CSS: Cascading Style Sheets | MDN
• flex - CSS: Cascading Style Sheets | MDN
• justify-content - CSS: Cascading Style Sheets | MDN
• align-items - CSS: Cascading Style Sheets | MDN