CSS justify-content と align-items: すべての値の違い

justify-content と align-items をひと言で

flex コンテナでは、justify-content がアイテムを 主軸 (行に沿った方向) に配分し、align-items が 交差軸 (行に対して上下の方向) で揃えます。どちらもコンテナに書きます:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center both ways</title>
  <style>
    .box {
      display: flex;
      justify-content: center; /* horizontal, in a row */
      align-items: center;     /* vertical, in a row */
      height: 140px;
      background: #e5e7eb;
    }
    .item { background: #2563eb; color: white; padding: 12px 18px; }
  </style>
</head>
<body>
  <div class="box"><div class="item">Centered</div></div>
</body>
</html>

ボックスは両方向の中央にあります。始まりと終わりの端から同じ距離で、上と下からも同じ距離です。height: 140px を取ると、コンテナがアイテム自身の高さまで縮むので、align-items: center はすることがなくなります。

justify-content のすべての値を実測する

下の各行は、同じ 3 つのアイテムに違う justify-content を指定したものです。各行の上のラベルの数値は、ブラウザが残したすき間です。最初のアイテムの前、アイテムの間、最後のアイテムの後の順に並んでいます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>justify-content values</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; width: 420px; background: #e5e7eb; margin: 2px 0 10px; }
    .row div { width: 60px; height: 28px; background: #2563eb; }
    .row div:nth-child(2) { background: #16a34a; }
    .row div:nth-child(3) { background: #f59e0b; }
  </style>
</head>
<body>
  <div id="list"></div>
  <script>
    const values = ['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'];
    const list = document.getElementById('list');
    values.forEach((v) => {
      const label = document.createElement('code');
      const row = document.createElement('div');
      row.className = 'row';
      row.style.justifyContent = v;
      row.innerHTML = '<div></div><div></div><div></div>';
      list.append(label, row);
      const b = row.getBoundingClientRect();
      const r = [...row.children].map((c) => c.getBoundingClientRect());
      const gaps = [r[0].left - b.left, r[1].left - r[0].right, r[2].left - r[1].right, b.right - r[2].right];
      label.textContent = 'justify-content: ' + v + '   gaps: ' + gaps.map(Math.round).join(' / ');
    });
  </script>
</body>
</html>

コンテナは 420px、アイテムは 180px を使うので、空きスペースは 240px です。その行き先は次のとおりです:

flex-start は flex の方向に従い、start は書字方向に従います。違いが出るのは row-reverse や column-reverse のときだけで、そのとき flex-start は逆側の端になります。

align-items のすべての値

align-items は行に対して直角の方向に働きます。下のアイテムは高さがばらばらなので、各値がどう扱うかがわかります:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>align-items values</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .grid { display: flex; flex-wrap: wrap; gap: 16px; }
    .row { display: flex; gap: 4px; width: 170px; height: 100px; background: #e5e7eb; }
    .row div { width: 50px; background: #2563eb; color: white; }
    .row div:nth-child(1) { font-size: 26px; }
    .row div:nth-child(2) { background: #16a34a; padding-top: 20px; }
    .row div:nth-child(3) { background: #f59e0b; }
  </style>
</head>
<body>
  <div class="grid" id="grid"></div>
  <script>
    ['stretch', 'flex-start', 'center', 'flex-end', 'baseline'].forEach((v) => {
      const cell = document.createElement('div');
      cell.innerHTML = '<code>align-items: ' + v + '</code><div class="row" style="align-items: ' + v + '"><div>Ag</div><div>Ag</div><div>Ag</div></div>';
      document.getElementById('grid').append(cell);
    });
  </script>
</body>
</html>

baseline のボックスでは、1 つ目が大きく、2 つ目は上に padding があるのに、3 つの「Ag」のラベルが同じ線の上に並んでいます。大きな見出しと小さな文字が混ざる行や、ラベルと入力欄の行にはこの値を使います。

クリックして揃える

3 × 3 のグリッドのどのセルでもクリックしてください。ボックスがそこに移動し、そこに置くための CSS が下に表示されます:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Alignment picker</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .wrap { display: flex; gap: 16px; align-items: flex-start; }
    .picker { display: grid; grid-template-columns: repeat(3, 28px); gap: 4px; }
    .picker button { height: 28px; border: 1px solid #111827; background: white; cursor: pointer; }
    .picker button[aria-pressed="true"] { background: #2563eb; }
    #stage { display: flex; width: 260px; height: 150px; background: #e5e7eb; }
    .item { background: #16a34a; color: white; padding: 10px 14px; }
    pre { background: #f3f4f6; padding: 8px; }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="picker" id="picker"></div>
    <div id="stage"><div class="item">Box</div></div>
  </div>
  <pre id="out"></pre>
  <script>
    const spots = ['flex-start', 'center', 'flex-end'];
    const stage = document.getElementById('stage');
    const pick = (row, col, btn) => {
      stage.style.alignItems = spots[row];
      stage.style.justifyContent = spots[col];
      document.querySelectorAll('.picker button').forEach((b) => b.setAttribute('aria-pressed', b === btn));
      document.getElementById('out').textContent =
        '.stage {\n  display: flex;\n  justify-content: ' + spots[col] + ';\n  align-items: ' + spots[row] + ';\n}';
    };
    spots.forEach((_, row) => spots.forEach((_, col) => {
      const btn = document.createElement('button');
      btn.setAttribute('aria-label', 'row ' + (row + 1) + ', column ' + (col + 1));
      btn.addEventListener('click', () => pick(row, col, btn));
      document.getElementById('picker').append(btn);
    }));
    pick(1, 1, document.querySelectorAll('.picker button')[4]);
  </script>
</body>
</html>

ピッカーの行は align-items を、列は justify-content を変えます。真ん中のセルが定番の「div の中央寄せ」です。

縦並びでは 2 つが入れ替わる

justify-content は常に主軸に従います。flex-direction: column では主軸が縦になるので、justify-content がアイテムを上下に、align-items が左右に動かします:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Column axes</title>
  <style>
    .col {
      display: flex;
      flex-direction: column;
      justify-content: flex-end; /* now vertical: pushed to the bottom */
      align-items: center;       /* now horizontal: centered */
      height: 160px;
      background: #e5e7eb;
    }
    .col div { background: #2563eb; color: white; padding: 6px 12px; }
  </style>
</head>
<body>
  <div class="col"><div>One</div><div>Two</div></div>
</body>
</html>

取り違えたときは、レイアウトを書き直すのではなく 2 つのプロパティを入れ替えましょう。

align-self と auto の margin: 1 つのアイテムだけ

アイテムに align-self を付けると、そのアイテムについて align-items を上書きします。flexbox に justify-self はありません。1 つのアイテムを主軸に沿って動かすには auto の margin を付けます。auto の margin はその側の空きスペースをすべて使います:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>align-self</title>
  <style>
    .bar { display: flex; align-items: flex-start; gap: 8px; height: 90px; background: #e5e7eb; }
    .bar div { background: #2563eb; color: white; padding: 8px 12px; }
    .bar .down { align-self: flex-end; background: #16a34a; }
    .bar .last { margin-inline-start: auto; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="bar">
    <div>Top</div>
    <div class="down">align-self: flex-end</div>
    <div class="last">margin-inline-start: auto</div>
  </div>
</body>
</html>

緑のアイテムだけが下に下がり、琥珀色のアイテムは行の反対側の端まで押し出され、ほかは始まりにとどまります。

複数行のとき: align-content

align-items はアイテムをその行の中で揃えます。コンテナが複数行に折り返すとき、行そのもの の間隔を決めるのが align-content で、justify-content と同じ値を使えます。nowrap のコンテナでは何もしません。その 1 行が常にコンテナの高さいっぱいになるからです。flex-wrap のページ で実例を見られます。

よくある間違い

• 軸を取り違える。 justify-content は並ぶ方向、align-items はそれと直角の方向です。縦並びでは、縦方向の中央寄せは justify-content: center です。
• 空きスペースがない。 flex: 1 のアイテムがスペースをすべて使うので、justify-content が配分するものがありません。コンテナが inline-flex でアイテムとちょうど同じ幅のときも同じです。
• align-items なのに高さがない。 内容と同じ高さのコンテナでは、揃える余地がありません。height か min-height を指定しましょう。
• flexbox で justify-self を探す。 flexbox では無視されます。アイテムに margin-inline-start: auto (または margin-left: auto) を使いましょう。
• align-items: stretch なのに伸びない。 自分の height を持つアイテムはそれを保ちます。高さを取り除きましょう (最小値が必要なら min-height を使います)。
• プロパティをアイテムに書く。 どちらも flex コンテナに書きます。アイテムに書くのは align-self だけです。