Flexbox の基本を3行で理解する

✦ Flexbox の本質
親要素に display: flex を書く。
それだけで子要素が横並びになる。あとは親で「並べ方」を、子で「比率」を指定するだけ。
❌ float 時代の横並び（古い）
.parent { overflow: hidden; }
.child  { float: left; width: 33%; }
/* clearfix とか margin 計算とか地獄だった */
✅ Flexbox（現代の書き方）
.parent { display: flex; gap: 16px; }
/* 子要素は自動で横並び。gapで間隔も一発。 */
▶ display: flex の効果
Item A
Item B
Item C

justify-content — 横方向の揃え

Flexbox を使う上で一番大事なプロパティ。 子要素を横方向にどう並べるかを指定する。

flex-start（デフォルト）— 左揃え
A
B
C
center — 中央揃え
A
B
C
flex-end — 右揃え
A
B
C
space-between — 両端に配置、残りを均等に分散
A
B
C

align-items — 縦方向の揃え

高さがバラバラな要素を縦方向にどう揃えるかを指定する。 center は「完全中央揃え」の呪文として必須で覚えよう。

align-items: center — 縦方向中央揃え
A
tall
B
C
✅ 完全中央揃えの最短コード
.center {
  display: flex;
  justify-content: center; /* 横：中央 */
  align-items: center;    /* 縦：中央 */
}
/* これだけで子要素が完全中央に！ */
💡 昔の苦労が嘘みたいに
CSS 黎明期、縦方向の中央揃えは「CSS 最難関」と言われてた。 position: absolute + top: 50% + margin-top の計算… 覚えなくていいよ。 Flexbox の align-items: center で一発解決。

プロパティをインタラクティブに試す

選択肢を変えて、ライブでレイアウトが変わるのを確認しよう。

flex-direction
justify-content
align-items
A
B
C

実際の UI でどう使う？

Flexbox が実際の現場でどう使われているか、よくある4パターンを見てみよう。

① ナビゲーションバー
Home Blog About
② メディアカード
カード見出し
画像とテキストを横並びにするパターン
③ 完全中央揃え
中央に表示
④ フッターレイアウト
© 2025 WEBLOG
利用規約 プライバシー
✅ ナビバーの CSS（実践コード）
.navbar {
  display: flex;
  justify-content: space-between; /* ロゴ ←→ メニュー */
  align-items: center;           /* 縦方向中央 */
  padding: 0 24px;
  height: 60px;
}

.nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
}

まとめ ― Flexbox チートシート

  • 親に display: flex → 子が横並びになる。まずこれだけ覚えよう。
  • justify-content で横方向、align-items で縦方向を揃える。
  • 完全中央揃えは justify-content: center + align-items: center のセット。
  • gap で要素の間隔を一括指定。margin の計算は不要。
  • flex-wrap: wrap を追加すると、はみ出た要素が自動で折り返す。

最初は全部覚えなくていい。まず横並びと中央揃えだけ使いこなせれば十分。 あとは作りながら少しずつ覚えていこう。