Flexboxチートシート

Flexboxは、CSSレイアウトのいちばんの主役——なのにjustify-contentとalign-itemsのどっちがどっちか、毎回わからなくなりますよね。この記事は、Flexboxの全プロパティを動くデモつきで引ける早見表です。デモのボタンを押して、値の効き方をその場で確かめられます。

全体マップ

Flexboxのプロパティは「親（コンテナ）につけるもの」と「子（アイテム）につけるもの」の2種類だけです。

親につけるプロパティ

display: flex——すべてはここから

親に1行書くだけで、子が横一列に並びます。

.container {
  display: flex;
}

justify-content——並べている方向の寄せ

横並びなら「横方向のどこに寄せるか」。ボタンを押して、6つの値の効き方を見比べてください。

align-items——直角方向の寄せ

横並びなら「縦方向のどこに寄せるか」。高さがちがう子をどうそろえるかは、これで決まります。

flex-direction——並べる方向

.container {
  flex-direction: row;            /* 横に並べる（標準） */
  flex-direction: column;         /* 縦に並べる */
  flex-direction: row-reverse;    /* 横・逆順 */
  flex-direction: column-reverse; /* 縦・逆順 */
}

columnにすると、justify-contentとalign-itemsの担当方向が入れかわる点にだけ注意（justifyが縦、alignが横になります）。

gap——子どうしのすき間

.container {
  gap: 16px;        /* 縦横とも16px */
  gap: 8px 16px;    /* 縦8px・横16px */
}

昔はmarginで1個ずつ空けていましたが、いまはgap一発です。端に余計な余白が出ないのも利点です。

flex-wrap——折り返し

.container {
  flex-wrap: nowrap;  /* 折り返さない（標準）。子がつぶれて詰めこまれる */
  flex-wrap: wrap;    /* 入りきらなければ次の行へ */
}

タグの一覧やカードの一覧など、個数が変わるものにはwrapを付けておくと安心です。

折り返して2行以上になったとき、行どうしの寄せを決めるのはalign-contentという別のプロパティです（値はjustify-contentと同じ顔ぶれ）。効かないのはたいていflex-wrapが標準のnowrapのまま＝折り返しが起きない設定のときなので、「align-contentを書いたのに何も起きない」ときは、まず親にflex-wrap: wrapがあるかを確認してください。

子につけるプロパティ

flex——余りスペースの分けかた

いちばん出番が多いのはflex: 1。「余っているスペースを引き受ける」の意味です。

.item {
  flex: 1;      /* 全員に付ければ均等分け */
}
.sidebar {
  flex: 0 0 200px;   /* 伸びない・縮まない・幅200px固定 */
}

flex: 0 0 200pxのような3つ並びの数字は、伸びる割合・縮む割合・基準の幅をまとめて書く省略記法です。

つまりflex: 1は「基準の幅を0にしてから、空いた場所を1の割合で引き受けて伸びる」、flex: 0 0 200pxは「伸びも縮みもせず200pxを守る」。この2つの型だけ覚えれば、実戦のほとんどをカバーできます。

align-self——自分だけ寄せを変える

親のalign-itemsを、その子だけ上書きします。「みんな上ぞろえだけど、これだけ下」ができます。

.item-special {
  align-self: flex-end;
}

order——自分だけ順番を変える

HTMLの順番はそのままに、見た目の並びだけ変えられます。数字が小さいほど先頭へ（標準は0）。

.item-first {
  order: -1;   /* 先頭に移動 */
}

そのまま使えるレシピ6つ

ど真ん中に置く

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

左にロゴ・右にメニューのヘッダー

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

1個だけ右端に寄せる

.container {
  display: flex;
}
.push-right {
  margin-left: auto;   /* 左の余白を自動＝右端へ押しやられる */
}

幅固定サイドバー＋残り全部の本文

.layout {
  display: flex;
}
.sidebar {
  flex: 0 0 200px;
}
.main {
  flex: 1;
}

入力欄いっぱい＋ボタンの検索フォーム

.search {
  display: flex;
  gap: 8px;
}
.search input {
  flex: 1;          /* 入力欄が余りを全部使う */
}

タグの一覧を折り返して並べる

.tags {
  display: flex;
  flex-wrap: wrap;   /* 入りきらなければ次の行へ */
  gap: 8px;
}

Flexboxが効かないときのチェックリスト

• そもそも並ばない → display: flexは並べたい子の親に書きます。子に書いていませんか？
• align-itemsが効かない → 親に高さがないと、寄せる余地がありません。heightかmin-heightを確認
• 子がつぶれる → flex-wrap: nowrap（標準）のせいです。折り返すならwrap、つぶしたくない子にはflex-shrink: 0
• gapが効かない → gapは親（flexコンテナ）側に書くプロパティです
• justify-contentが効かない → 子がflex: 1やwidth: 100%で親いっぱいに広がっていませんか？余りスペースが無いと、寄せようがありません

まとめ

1. プロパティは親につけるものと子につけるものの2種類だけ——迷ったらこの記事の全体マップへ
2. justifyは並べている方向、alignは直角方向——横並びなら、justifyが横・alignが縦
3. flex: 1は「余りを引き受ける」——1人に付ければ総取り、全員に付ければ均等分け

値の効き方は、読むより触るほうが早く身につきます。上のデモのボタンをひととおり押してから戻ると、次からは迷わず書けるはずです。