【CSS】Flexboxが分からない人へ ― 図解で覚える基本パターン5つ

この記事で解決すること

「Flexboxって便利らしいけど、何がどう動くのか分からない…」

CSSで要素を横に並べたい、中央に寄せたい。そんなときに使うのがFlexboxです。覚えるべきパターンは5つだけ。コピペで使えるコードと一緒に解説します。

Flexboxとは

Flexboxは、CSSで要素の配置を簡単にコントロールするための仕組みです。

従来は float や inline-block を使って横並びにしていましたが、Flexboxなら1行で実現できます。

/* これだけで子要素が横並びになる */
.container {
  display: flex;
}

基本の考え方

Flexboxには「親要素（コンテナ）」と「子要素（アイテム）」の関係があります。

<div class="container">  ← 親（display: flexを指定）
  <div class="item">A</div>  ← 子
  <div class="item">B</div>  ← 子
  <div class="item">C</div>  ← 子
</div>

親に display: flex を指定すると、子要素の並び方をコントロールできるようになります。

パターン1：横並び

最も基本的な使い方です。

.container {
  display: flex;
}

変更前：        変更後：
┌───┐          ┌───┐┌───┐┌───┐
│ A │          │ A ││ B ││ C │
└───┘          └───┘└───┘└───┘
┌───┐
│ B │
└───┘
┌───┐
│ C │
└───┘

display: flex を指定するだけで、子要素が自動的に横並びになります。

パターン2：中央寄せ（上下左右）

ページの真ん中にコンテンツを配置したいとき。

.container {
  display: flex;
  justify-content: center;  /* 横方向の中央 */
  align-items: center;      /* 縦方向の中央 */
  height: 100vh;            /* 画面の高さいっぱい */
}

┌─────────────────────┐
│                     │
│                     │
│       ┌───┐         │
│       │ A │         │
│       └───┘         │
│                     │
│                     │
└─────────────────────┘

justify-content が横方向、align-items が縦方向の配置を決めます。この2つはセットで覚えましょう。

パターン3：均等配置（スペース均等）

ナビゲーションメニューなどで、要素を均等に配置したいとき。

.container {
  display: flex;
  justify-content: space-between;
}

┌───┐          ┌───┐          ┌───┐
│ A │          │ B │          │ C │
└───┘          └───┘          └───┘
←──────────────────────────────→

space-between は最初と最後の要素を端に寄せて、残りを均等に配置します。

他にもよく使う値：

space-around → 各要素の左右に均等なスペース
space-evenly → すべての間隔が完全に均等

パターン4：折り返し（レスポンシブ対応）

画面幅が狭くなったときに、自動で折り返したいとき。

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.item {
  width: 200px;
}

画面が広いとき：
┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐
│  A   │ │  B   │ │  C   │ │  D   │
└──────┘ └──────┘ └──────┘ └──────┘

画面が狭いとき：
┌──────┐ ┌──────┐
│  A   │ │  B   │
└──────┘ └──────┘
┌──────┐ ┌──────┐
│  C   │ │  D   │
└──────┘ └──────┘

flex-wrap: wrap を追加するだけで、入りきらない要素が自動で次の行に移動します。gap で要素間のスペースも指定できます。

パターン5：1つだけ右寄せ

ヘッダーで「ロゴは左、メニューは右」のようなレイアウト。

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

.menu {
  margin-left: auto;
}

<div class="container">
  <div class="logo">ロゴ</div>
  <nav class="menu">メニュー</nav>
</div>

┌──────────────────────────────┐
│ ロゴ                 メニュー │
└──────────────────────────────┘

margin-left: auto を使うと、その要素が右端に寄ります。Flexboxの中で auto マージンを使うテクニックは覚えておくと便利です。

よく使うプロパティ一覧

親要素（コンテナ）に指定するもの

プロパティ	役割	よく使う値
`display`	Flexboxを有効化	`flex`
`justify-content`	横方向の配置	`center`, `space-between`
`align-items`	縦方向の配置	`center`, `stretch`
`flex-wrap`	折り返し	`wrap`, `nowrap`
`gap`	要素間のスペース	`16px`, `1rem`
`flex-direction`	並ぶ方向	`row`, `column`

子要素（アイテム）に指定するもの

プロパティ	役割	よく使う値
`flex-grow`	余白を埋める比率	`1`
`flex-shrink`	縮む比率	`0`（縮まない）
`flex-basis`	基本サイズ	`200px`, `auto`
`align-self`	個別の縦配置	`center`, `flex-end`

まとめ

Flexboxは親に display: flex を指定するだけで始められる
横並び、中央寄せ、均等配置、折り返し、右寄せの5パターンでほぼ対応できる
justify-content（横）と align-items（縦）はセットで覚える
flex-wrap: wrap でレスポンシブ対応も簡単
迷ったらまずこの5パターンのどれに当てはまるか考える