CSS Flexbox 実用ガイド

このページ自体も Flexbox で作られています。各見出しの下には動くサンプルと、そのままコピーして使える CSS(右上のコピーボタン)を載せています。親要素(コンテナ)に display: flex; を指定すると、子要素(アイテム)の並び方を自由にコントロールできます。

1. 基本 — 横並びにする

<div> などは普通、縦に積み重なりますが、親に display: flex; をつけるだけで子は横並びになります。 gap を組み合わせるとすき間も楽に取れます(Flexbox の相棒です)。

Box 1

Box 2

Box 3

.container {
  display: flex;
  gap: 10px; /* 要素間のすき間(親に指定するだけ) */
}

2. justify-content — 主軸(横)方向の揃え

余ったスペースをどう配分するか。実務で使う頻度が最も高いプロパティです。 両端に寄せたい → space-between / 中央寄せ → center と覚えましょう。

center

.container { display: flex; justify-content: center; }

flex-end

右端に寄る

.container { display: flex; justify-content: flex-end; }

space-

between

.container {
  display: flex;
  justify-content: space-between; /* ヘッダーの「ロゴ左 / メニュー右」はこれだけでOK */
}

around

.container { display: flex; justify-content: space-around; } /* 外側にも半分の余白 */

evenly

.container { display: flex; justify-content: space-evenly; } /* 全すき間が均等 */

3. align-items — 交差軸(縦)方向の揃え

横並びのときは縦方向の揃え。center を付けるだけで垂直中央寄せになります。高さの違う要素を混ぜると効果がよく分かります。

stretch

(初期値)

高さいっぱいに伸びる

.container { display: flex; align-items: stretch; } /* 初期値 */

flex-start

上に寄る

↑

.container { display: flex; align-items: flex-start; }

center

ど真ん中

垂直中央 ↑↓

.container { display: flex; align-items: center; } /* 垂直中央寄せ! */

flex-end

下に寄る

↓

.container { display: flex; align-items: flex-end; }

4. flex-direction — 並ぶ方向を変える

column を指定すると縦積みになり、justify-content / align-items の役割も反転します。ここはよくあるつまずきポイントなので注意しましょう。

row

(初期値・横並び)

column

縦並びになる

スマホ向けメニューなどに◎

.container {
  display: flex;
  flex-direction: column;        /* 縦並び(row が初期値) */
  justify-content: center;       /* column のときは「縦方向」の中央寄せになる! */
  align-items: center;           /* column のときは「横方向」の中央寄せになる! */
}

5. flex-wrap — 折り返し

初期値(nowrap)では子要素は縮んででも1行に入ろうとします。 wrap を付けると、入りきらない分が折り返します。

nowrap

潰れて

はみ出す…(初期値)

wrap

折り返して

くれるので読みやすい!

.container {
  display: flex;
  flex-wrap: wrap;   /* 折り返し有効。カード一覧などで必須級 */
  gap: 16px;         /* 折り返しても gap が効くので margin 不用 */
}
.card { flex: 1 1 240px; } /* 最小幅240pxを守って伸縮 → 簡易レスポンシブ */

6. flex-grow — 残り領域の配分

余った幅を子要素にどう分けるか。サイドバー+メインカラムのような2カラムレイアウトにそのまま使えます。ショートハンドの flex: 1(= grow:1, shrink:1, basis:0)も覚えておくと便利です。

flex-grow: 1

flex-grow: 2(2倍伸びる)

伸びない

.sidebar { flex: 0 0 240px; } /* 固定幅240px、伸縮しない */
.main    { flex: 1; }         /* 残り全部を使う */
/* これだけで「固定サイドバー + 可変メイン」が完成 */

🎁 実務で使える定番レシピ

そのままコピーして即使える組み合わせ集です。

① 画面(親)のど真ん中に置く

モーダルやローディングに◎

.parent {
  display: flex;
  justify-content: center; /* 横方向 中央 */
  align-items: center;     /* 縦方向 中央 */
  height: 100vh;           /* 親の高さが必要(100vh = 画面いっぱい) */
}

② コンテンツを一番下に押し込む(margin-top: auto)

上のコンテンツ

フッター・ボタンなど(margin-top: auto)

.container {
  display: flex;
  flex-direction: column;
}
.push-down {
  margin-top: auto; /* auto マージンが余白を全部吸って下へ押し込む */
}                   /* 「同意する」ボタン等をカード最下部に置くのに便利 */

③ 高さの違うカードを同じ高さに&ボタンを揃える

カードA

短いテキスト。

詳細を見る

カードB

長めのテキストです。文章量が違っても枠の高さは揃います。p に flex-grow: 1 を効かせているので、各カード内でボタンの高さ位置も揃います。

詳細を見る

カードC

中くらいのテキスト。

詳細を見る

.cards {
  display: flex;            /* flex の初期値 align-items: stretch で高さが揃う */
  gap: 16px;
}
.card {
  flex: 1;                  /* 横幅も均等に */
  display: flex;
  flex-direction: column;
}
.card p { flex-grow: 1; }   /* 説明文が余白を吸い、ボタンが必ず下端に揃う */

📋 チートシート

指定先	プロパティ	よく使う値 / 用途
親	display	flex(有効化)/ inline-flex
親	justify-content	center / space-between / space-evenly / flex-end(主軸の揃え)
親	align-items	stretch(初期値)/ center / flex-start / baseline(交差軸の揃え)
親	flex-direction	row(初期値)/ column / row-reverse
親	flex-wrap	nowrap(初期値)/ wrap(折り返し)
親	gap	10px / 16px 24px(行列)— margin より楽
子	flex	1(残り配分)/ none(固定)/ 1 1 240px(basis付き)
子	align-self	子だけ個別に縦位置を変える(center 等)
子	order	表示順を入れ替え(初期値 0)
子	margin: auto	auto の方向へ押し込む(片側だけ寄せる)

💡 つまずきポイント: column 時は justify-content / align-items の役割が反転すること、子要素の width/height が効きにくい場合は flex-basis を使うことを思い出しましょう。