概要

フロントエンド開発において、レイアウトの崩れは最大の敵だ。
特に画面幅が変わるレスポンシブ環境では、意図しない折返しやはみ出しが簡単に発生する。

そこで使われるのが display: flex──通称「Flexbox」。
ただし、単に flex を指定しただけでは、思い通りの挙動にはならない。
本当に重要なのは、Flexboxを構造として理解し、目的に応じたプロパティを最適に設計することだ。

この記事では、Flexboxをゼロから理解し、現場で崩れないUIを作るためのプロパティ設計とベストプラクティスを解説する。

対象環境

全主要ブラウザ（Chrome / Firefox / Safari / Edge / モバイル対応）  
CSS3以降の環境

Flexboxとは何か？

子要素の方向・サイズ・折返し・整列を制御するためのレイアウトモデル
要素間のスペースを柔軟に配分できる（→ “Flexible Box”）
グリッドと違い、1軸（主軸）でレイアウトを行う

基本構文

.container {
  display: flex;
}

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

これだけで子要素は横並びになる。
だが、Flexboxの真価はプロパティ設計の組み合わせにある。

覚えておくべき主軸と交差軸の概念

用語	横向き (`flex-direction: row`)	縦向き (`flex-direction: column`)
主軸	横方向	縦方向
交差軸	縦方向	横方向

よく使うFlexboxプロパティ設計

`flex-direction`

flex-direction: row;    /* 横並び（デフォルト） */
flex-direction: column; /* 縦並び */

`justify-content`（主軸方向の整列）

justify-content: flex-start;   /* 左詰め */
justify-content: flex-end;     /* 右詰め */
justify-content: center;       /* 中央寄せ */
justify-content: space-between;/* 両端寄せ */
justify-content: space-around; /* 均等配置 */

`align-items`（交差軸方向の整列）

align-items: stretch;    /* 高さを揃える（デフォルト） */
align-items: flex-start; /* 上寄せ */
align-items: flex-end;   /* 下寄せ */
align-items: center;     /* 中央揃え */

`flex-wrap`

flex-wrap: nowrap;      /* 折返しなし（デフォルト） */
flex-wrap: wrap;        /* 折返し可能にする */

→ 複数行対応レイアウトには必須。これを指定しないと横幅が溢れて崩れる原因に。

子要素側での設計：`flex-grow`, `flex-shrink`, `flex-basis`

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

flex-grow: 空きスペースの分配
flex-shrink: 要素が小さくなる許容度
flex-basis: 初期幅（例：200px）

よくある例：2カラム構成

.left {
  flex: 0 0 200px; /* 固定幅 */
}
.right {
  flex: 1;         /* 残りを自動で埋める */
}

実用例：レスポンシブ対応の横並びカード

<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

.card {
  flex: 1 1 300px;
  min-width: 250px;
}

flex-wrap: wrap → 横幅に収まらなければ自動で折返し
gap → 要素間のスペースも自動調整
min-width → 小さくなりすぎるのを防ぐ

よくある落とし穴と対策

❌ `width` と `flex-grow` を併用して意図が競合する

.item {
  width: 100px;
  flex-grow: 1;
}

→ この場合、width が固定されて flex-grow が無視されることがある。
→ ✅ 明示的に flex-basis を使う or width を避ける

❌ 高さが揃わない

align-items: stretch; /* デフォルトがこれ */

→ アイテムの内容量が違うと高さがバラつく
→ ✅ 明示的に align-items: flex-start や min-height を指定

❌ 中央寄せできない問題

.container {
  justify-content: center;
  align-items: center;
}

→ 横と縦の両方で中央揃えしたいときにこの組み合わせを忘れがち

結語

Flexboxはただの「横並びツール」ではない。
それは「空間をどう分けるか」を設計する、モダンなレイアウトエンジンだ。

崩れないUI、拡張しやすい構造、見た目と設計の一致──
それを実現するために、Flexboxの構成要素を理解し、意図して使うことが必要不可欠だ。

思い通りに組めたレイアウトは、コードの自信になる。
Flexboxは、崩れないフロントエンドの第一歩である。