Flexbox

Flexbox とは

Flexbox (Flexible Box Layout) は、コンテナ内の要素を行または列方向に柔軟に配置する CSS のレイアウトモデルである。2012 年 9 月に W3C の Candidate Recommendation となって実装が広まり、float や inline-block によるハック的なレイアウトを置き換えた。display: flex で有効化する。仕様の段階としては 2025 年 10 月の更新版でも Candidate Recommendation にとどまり、W3C 勧告 (Recommendation) には至っていない。ブラウザ実装が先に安定して事実上の標準になった型で、勧告でないことは実務上の制約にならない。

基本プロパティ

基本プロパティの例を示す。

.container {
  display: flex;
  flex-direction: row;        /* 主軸の方向: row | column */
  justify-content: center;    /* 主軸の配置 */
  align-items: center;        /* 交差軸の配置 */
  gap: 16px;                  /* 要素間の間隔 */
  flex-wrap: wrap;            /* 折り返し */
}

.item {
  flex: 1;                    /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
  flex-shrink: 0;             /* 縮小を防止 */
}

よく使うパターン

中央揃え (最も頻出)

.center {
  display: flex;
  justify-content: center;  /* 水平中央 */
  align-items: center;      /* 垂直中央 */
}

ナビゲーションバー

.navbar {
  display: flex;
  justify-content: space-between; /* ロゴを左、メニューを右 */
  align-items: center;
}

カードの横並び (レスポンシブ)

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card {
  flex: 1 1 300px; /* 基準幅 300px、余りがあれば伸びる */
}

flex: 1 1 300px の 300px は flex-basis で、配分を始める前の基準幅にすぎない。最小幅の保証ではないので、flex-shrink が 1 のままだと 1 行に収まらないときは 300px より縮む。300px を下限として守らせたいなら min-width: 300px を併記するか flex-shrink: 0 にする。

フッターを画面下部に固定

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1; }  /* main が残りの高さを占める */
footer { /* 自動的に下部に配置 */ }

Flexbox vs CSS Grid

Flexbox と Grid はどちらで組むか迷いやすいが、分かれ目は並べたい方向が 1 次元か 2 次元かだけである。

観点	Flexbox	CSS Grid
次元	1 次元 (行 or 列)	2 次元 (行 × 列)
適するケース	ナビバー、ボタン群、カード横並び	ページ全体のレイアウト、ダッシュボード
コンテンツ起点	コンテンツのサイズに応じて配置	グリッド定義に要素を配置
ブラウザ対応	ほぼ全ブラウザ	ほぼ全ブラウザ

Flexbox は「要素を 1 列に並べる」、Grid は「2 次元のグリッドに配置する」。両方を組み合わせて使うのが一般的だ。

Tailwind CSS での Flexbox

Tailwind CSS での Flexbox の例を示す。

<!-- Tailwind: ナビゲーションバー -->
<nav class="flex items-center justify-between px-4 py-2">
  <div class="text-xl font-bold">Logo</div>
  <div class="flex gap-4">
    <a href="/">Home</a>
    <a href="/about">About</a>
  </div>
</nav>

よくある落とし穴

flex-shrink のデフォルト

flex-shrink のデフォルト値は 1 で、コンテナが狭いと要素が意図せず縮小される。画像やアイコンなど固定サイズの要素には flex-shrink: 0 を設定する。

min-width: auto

min-width の初期値は auto だが、その解決先は要素の種類で変わる。ブロック要素や inline-block では 0 に解決されるのに対し、Flex アイテムではコンテンツの最小幅 (min-content) が下限になる。長いテキストや text-overflow: ellipsis がコンテナを押し広げるのはほぼこれが原因で、min-width: 0 を明示すると解ける。flex-direction: column のときは min-height 側が同じ挙動をする。なお overflow: hidden や overflow: auto を付けた要素はスクロールコンテナ扱いになり自動最小サイズが 0 になるため、min-width: 0 を書かなくても縮むようになる。

Flexbox の関連書籍も参考になる。