概要
フロントエンド開発において、レイアウトの崩れは最大の敵だ。
特に画面幅が変わるレスポンシブ環境では、意図しない折返しやはみ出しが簡単に発生する。
そこで使われるのが 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は、崩れないフロントエンドの第一歩である。