Flexboxチートシート

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

全体マップ

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

親につけるプロパティ

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

親に1行書くだけで、子が横一列に並びます。ボタンで切り替えてみてください。

.container {
  display: flex;
}

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

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

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

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

flex-direction——並べる方向

横に並べるか、縦に並べるか。ボタンを押して、4つの値の効き方を見比べてください。

.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;
}

親はalign-items: flex-start（上ぞろえ）のままです。autoは「親の指定にしたがう」という標準値なので、2番の箱もほかと同じ上ぞろえになります。

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

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

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

紫の箱はHTMLではずっと2番目のままです。見た目だけが動いている、というのがポイント。読み上げソフトやキーボード操作の順番はHTMLのままなので、使いすぎると操作しづらいページになります。並び順そのものを変えたいときは、HTMLを書き換えるほうが安全です。

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

ど真ん中に置く

<div class="container">
  <div class="box">ど真ん中</div>
</div>

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

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

<header class="header">
  <div class="logo">ぴよぐらみんぐ</div>
  <nav class="nav">
    <a href="#">ホーム</a>
    <a href="#">コース</a>
    <a href="#">べんりワザ</a>
  </nav>
</header>

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

1個だけ右端に寄せる

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item push-right">3</div>
</div>

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

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

<div class="layout">
  <aside class="sidebar">サイドバー</aside>
  <main class="main">本文</main>
</div>

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

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

<div class="search">
  <input type="text" placeholder="キーワードを入力">
  <button>検索</button>
</div>

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

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

<div class="tags">
  <span class="tag">HTML</span>
  <span class="tag">CSS</span>
  <span class="tag">JavaScript</span>
</div>

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

FlexboxとGrid、どっちを使う？

ざっくり「1方向に並べるならFlexbox、縦横のマス目で組むならGrid」。中身の量に合わせて自然に並べたいときはFlexbox、列や行をきっちりそろえたいときはGridです。

どちらか一方を選ぶものではなく、入れ子にして両方使うのがふつうです。ページの骨組みはGridで組み、その中のヘッダーはFlexboxで左右に振り分ける、といった具合です。

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人に付ければ総取り、全員に付ければ均等分け

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