Flexboxレイアウト

Flexbox — display:flex・justify/align・grow/shrink/basis・実践パターン5選

CSS Flexbox（フレックスボックス）は、1次元のレイアウト（横または縦方向への要素配置）を直感的かつ強力に実現するレイアウトモジュールです。Flexbox 以前は float や position を複雑に組み合わせる必要があった「垂直中央揃え」「均等配置」「可変幅カラム」が、わずか数行の CSS で実現できます。このレッスンでは Flexbox の基本的な仕組み、主要プロパティの使い方、そして現場で繰り返し使われる5つの実践パターンを習得します。

---

Flexboxの基本概念

Flexboxの主要プロパティと実践パターン5選

display: flex を要素に設定すると、その要素がフレックスコンテナになり、直接の子要素がすべてフレックスアイテムになります。

<div class="container">   <!-- フレックスコンテナ -->
  <div class="item">A</div>  <!-- フレックスアイテム -->
  <div class="item">B</div>
  <div class="item">C</div>
</div>

.container {
  display: flex;  /* これだけで子要素が横並びになる */
}

Flexbox には2つの軸があります。

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

---

コンテナに設定するプロパティ

flex-direction — 並ぶ方向

.container { display: flex; flex-direction: column; }

justify-content — 主軸方向の揃え

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

flex-wrap — 折り返し

.container { flex-wrap: wrap; }  /* 幅に収まらない場合に折り返す */

デフォルトの nowrap では、アイテムが圧縮されても折り返しません。カードグリッドなど複数行になるレイアウトでは flex-wrap: wrap が必須です。

gap — アイテム間の余白

.container { gap: 16px; }           /* 縦横両方 */
.container { gap: 12px 24px; }      /* 縦 | 横 */
.container { row-gap: 12px; column-gap: 24px; }  /* 個別 */

margin でアイテム間の余白を設定するよりもシンプルで、最初・最後のアイテムに余分な余白が生まれないため推奨です。

💡 justify-content と align-items の軸の覚え方: justify が主軸（row なら横）、align が交差軸（row なら縦）です。「j は horizontal の h に似てるから横」と覚える方法もあります。

---

アイテムに設定するプロパティ

flex-grow — 余白を埋めて伸びる割合

コンテナに余白がある場合、アイテムがどの割合で伸びるかを指定します。

.item-a { flex-grow: 1; }  /* 余白の1/3を取得 */
.item-b { flex-grow: 2; }  /* 余白の2/3を取得 */
.fixed   { flex-grow: 0; }  /* 伸びない（デフォルト） */

flex-shrink — コンテナが狭い時に縮む割合

コンテナが狭くなった場合、アイテムがどの割合で縮むかを指定します。デフォルトは 1（縮む）。

.sidebar { flex-shrink: 0; }  /* サイドバーは縮まない */
.main    { flex-shrink: 1; }  /* メインは縮む（デフォルト） */

flex-basis — 初期サイズ

伸縮前の基本サイズを指定します。width に似ていますが、flex-direction: column の場合は height と同じ意味になります。

.item { flex-basis: 200px; }  /* 初期幅200px */
.item { flex-basis: auto; }   /* contentサイズが初期値（デフォルト） */

flex ショートハンド

flex: grow shrink basis の順で一括指定します。

.item { flex: 1; }           /* flex: 1 1 0% と同じ。均等伸縮 */
.item { flex: 0 0 200px; }   /* 固定幅200px。伸縮しない */
.item { flex: auto; }        /* flex: 1 1 auto と同じ */
.item { flex: none; }        /* flex: 0 0 auto。完全固定 */

align-self — 個別の交差軸揃え

align-items はコンテナ全体への設定ですが、align-self はアイテム個別に上書きできます。

.special { align-self: flex-end; }  /* このアイテムだけ下揃え */

⚠️ flex: 1 は flex-basis: 0% に注意: flex: 1 は flex: 1 1 0% の略で、初期サイズを0から均等に分配します。コンテンツサイズを初期値にしたい場合は flex: 1 1 auto を使ってください。

---

実践パターン5選

パターン1: 上下左右中央揃え

最も頻繁に使うパターンです。モーダルの中身、アイコンの中央配置などに使います。

.center-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;  /* 高さが必要 */
}

パターン2: ナビゲーションバー（ロゴ左 / メニュー右）

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 64px;
}

パターン3: 均等幅カードグリッド

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.card {
  flex: 0 0 calc(33.333% - 16px);  /* 3列 */
}

画面幅が変わっても calc で計算された幅を維持します。レスポンシブ対応は media query で列数を変えます。

パターン4: サイドバー + メインコンテンツ

.layout {
  display: flex;
  gap: 24px;
}
.sidebar {
  flex: 0 0 250px;  /* 固定幅250px */
}
.main-content {
  flex: 1;  /* 残りの幅をすべて使う */
}

パターン5: フッターを常に下に固定

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1;  /* コンテンツが少なくてもmainが伸びてフッターを下に押す */
}
footer {
  flex-shrink: 0;
}

💡 Flexbox と Grid の使い分け: Flexbox は1次元（横か縦）のレイアウトに最適です。2次元（縦横同時）のグリッドレイアウトには CSS Grid を使いましょう。「1行のナビ → Flex、ページ全体のグリッド → Grid」が基本指針です。

---

🏋️実践ワーク

以下のワークを実施してください。

1. ◆中央揃えの実装: width: 300px; height: 200px の要素を画面の上下左右中央に配置してください。justify-content と align-items の組み合わせで実現します。
2. ◆ナビバーの作成: ロゴ（左端）と3つのメニュー項目（右端）を持つナビゲーションバーを Flexbox で実装してください。
3. ◆3カラムカードグリッド: 9枚のカードを3列×3行に並べ、flex-wrap: wrap と calc を使って実装してください。画面幅 768px 以下では1列になるよう media query も追加してください。
4. ◆サイドバーレイアウト: 左250px固定のサイドバーと残り全幅のメインエリアを flex: 0 0 250px と flex: 1 で実装してください。

📝まとめ

Flexbox は display: flex をコンテナに設定するだけで子要素を横並びにできる強力なレイアウト手法です。justify-content で主軸方向、align-items で交差軸方向の揃えを制御します。アイテム側では flex: grow shrink basis のショートハンドで伸縮と初期幅を指定します。特に flex: 1 で均等伸縮、flex: 0 0 固定幅 で固定幅を実現するパターンは頻出です。gap プロパティで余白を設定し、flex-wrap: wrap で折り返しを有効にすることで柔軟なグリッドレイアウトも構築できます。次のレッスンではレスポンシブデザインのための media query を学びます。