Flexbox

Flexbox とは

Flexbox (Flexible Box Layout) は、コンテナ内の要素を行または列方向に柔軟に配置する CSS のレイアウトモデルである。2012 年に W3C で標準化され、float や inline-block によるハック的なレイアウトを置き換えた。display: flex で有効化する。

基本プロパティ

.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、余白があれば伸びる */
}

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

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

Flexbox vs CSS Grid

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

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

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

Flex アイテムのデフォルトの min-width は auto で、コンテンツの最小幅より小さくならない。長いテキストがはみ出す場合は min-width: 0 を設定する。

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