Jenee
もう迷わない！CSS Flexboxの配置ルール完全攻略ガイド【チートシート級】
開発

もう迷わない！CSS Flexboxの配置ルール完全攻略ガイド【チートシート級】

「横並びにするならdisplay: flex」までは分かるけど、プロパティの組み合わせで迷っていませんか？Flexboxの仕組みを図解レベルで解説し、コピペで使えるレイアウトパターンを紹介します。

Flexbox、雰囲気で書いていませんか？

「とりあえず display: flex して、justify-content: center すれば真ん中に来るはず…あれ、来ない？」 「要素が潰れてしまう… width 指定してるのに！」

CSS Flexbox（Flexible Box Layout Module）は、現代のWeb制作において必須のスキルですが、プロパティの数が多く、その挙動も直感的ではない部分があります。 都度ググって解決するのも良いですが、**「なぜそうなるのか」**を理解しておくと、レイアウトの構築スピードが劇的に上がります。

今回は、Flexboxの挙動を根本から理解し、迷わずコーディングできるようになるための完全ガイドです。

CSS Flexbox プレイグラウンドFlexboxの挙動を視覚的に確認・学習し、CSSコードを自動生成

親要素（コンテナ）と子要素（アイテム）の関係

Flexboxを理解する第一歩は、プロパティを適用する場所を間違えないことです。

  • 親（Flex Container）に書く: 並び方全体のルール（横向き？縦向き？中央寄せ？）
  • 子（Flex Item）に書く: 個々のアイテムの振る舞い（伸びる？縮む？順番は？）

親要素で指定する6つの基本プロパティ

  1. flex-direction: 並ぶ向き

    • row (初期値): 左から右へ（横並び）
    • column: 上から下へ（縦並び）
    • row-reverse: 右から左へ（逆順）
    • 重要: これを変えると「主軸」と「交差軸」が入れ替わります。

  2. flex-wrap: 折り返し

    • nowrap (初期値): 一行に詰め込む（アイテムが潰れる）
    • wrap: 端まで来たら折り返す

  3. justify-content: 主軸方向の配置

    • flex-start: 左揃え（directionがrowの場合）
    • center: 中央揃え
    • space-between: 両端揃え（ナビゲーションで便利）
    • space-around: 均等配置

  4. align-items: 交差軸方向の配置

    • stretch (初期値): 親の高さに合わせて伸びる
    • center: 中央揃え
    • flex-start: 上揃え

  5. align-content: 複数行になった時の行ごとの配置

    • space-between などが使えますが、flex-wrap: wrap で複数行になっていないと効きません。

  6. gap: アイテム間の余白

    • gap: 20px のように指定。昔のように margin-right を書いて :last-child で消す必要はありません。

子要素の魔術：flex-grow, shrink, basis

Flexboxで一番つまずきやすいのがこの3兄弟です。 これらはショートハンド flex: [grow] [shrink] [basis] でまとめて書くのが一般的です。

flex-basis vs width

  • width: 要素の幅を固定します。
  • flex-basis: Flexboxルール内での基準サイズです。
  • コンテンツ量や親のサイズによって変動させたいなら flex-basis を使います。

flex-grow（伸び率）

「余ったスペースをどう分配するか」の比率です。

  • 全員 flex-grow: 1 → 等幅になる
  • Aが 1、Bが 2 → BはAの2倍の余白をもらう

flex-shrink（縮み率）

「スペースが足りない時、誰がどれだけ縮むか」です。

  • flex-shrink: 0 にすると、絶対に縮みません（画像の横幅維持などに必須）。

よくある失敗と解決策（FAQ）

Q. align-items: center が効かない

A. 親要素に高さ（height）はありますか？ Flexboxは親要素の中で整列します。親要素が子要素と同じ高さしかなければ、動きようがありません。min-height: 100vh などで高さを確保してください。

Q. 要素が潰れてしまう

A. flex-shrink: 0 を指定してください。 または min-width を指定するのも有効です。Flexboxは初期値で「入らなければ縮む（shrink: 1）」設定になっています。

Q. justify-content: right が効かない

A. 正しくは flex-end です。 ただし、最近のブラウザでは start, end もサポートされ始めていますが、flex-end が無難です。

CSS Grid との使い分け

「FlexboxがあればGridはいらない？」いいえ、役割が違います。

  • Flexbox: **1次元（一方向）**のレイアウト。横並び、縦並び、ナビゲーションバーなど。
  • CSS Grid: **2次元（面）**のレイアウト。ページ全体の骨組み、タイル状の配置など。

結論: 部品（コンポーネント）の中身はFlexbox、ページ全体のレイアウトはGrid、と使い分けるのが現代の主流です。

コピペで使える！鉄板レイアウトパターン

1. ど真ん中（上下左右中央）

ヒーローヘッダーやローディング画面で必須。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

2. 両端配置（ヘッダー）

ロゴとメニューを左右に振る。

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

3. カード型レイアウト（レスポンシブ）

折り返し＋余白。

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.card {
  /* 3列の場合 */
  flex: 0 1 calc(33.333% - 20px * 2 / 3);
}

まとめ

Flexboxは、理屈で覚えるよりも手を動かして覚えるのが一番早いです。 「どっちだっけ？」と思ったら、Jeneeのプレイグラウンドを開いてください。ガチャガチャ動かして、理想の形になったらコードをコピー。それが一番確実で早い方法です。

CSS Flexbox プレイグラウンドFlexboxの挙動を視覚的に確認・学習し、CSSコードを自動生成

関連記事

一覧に戻る