【CSS】justify-content の使い方｜Flexbox で要素を水平方向に配置・中央寄せする方法

Flexbox で要素を横並びにしたあと、「中央に寄せたい」「両端に振り分けたい」「等間隔に散らしたい」と思ったときに使うのが justify-content プロパティです。これは Flexbox の主軸（通常は横方向）に沿って、アイテムをどう配置するかを決めるプロパティです。この記事では flex-start・center・flex-end・space-between・space-around・space-evenly の6つの値が実際にどう並ぶのかを、表示を見比べながら解説します。よく似た align-items との違いや、指定しても効かないときの原因にも触れます。

justify-content は「主軸方向の余白の配り方」を決める

justify-content は、Flexbox（display: flex を指定した親要素）の中で、アイテムを主軸に沿ってどこに寄せるか、あるいは余ったスペースをどう配分するかを指定するプロパティです。主軸とは、アイテムが並んでいく向きのことで、初期状態（flex-direction: row）では横方向を指します。つまり横並びのレイアウトでは、justify-content が左右方向の配置を担当します。

ポイントは、アイテムを並べたあとに「親要素の中に余っている幅」をどう扱うか、という点です。左に詰めるのか、中央に集めるのか、それともアイテムとアイテムのあいだに均等に分けるのか。justify-content はこの余白の配り方を切り替えるプロパティだと考えると分かりやすくなります。なお justify-content は Flexbox だけでなく Grid レイアウトでも使えますが、この記事では使う機会の多い Flexbox を中心に説明します。

基本の使い方

justify-content は、display: flex を指定した「親要素」に書きます。アイテム（子要素）側ではなく親側に指定する点に注意してください。次の例では、3つの箱を中央に寄せています。

.container {
  display: flex;            /* まず Flexbox にする */
  justify-content: center;  /* アイテムを主軸（横）方向の中央に寄せる */
}

display: flex を付けないと justify-content は何も効きません。横並びにするための display: flex（または display: grid）とセットで使うプロパティだと覚えておきましょう。

6つの値の違い

justify-content でよく使う値は次の6つです。前半の3つ（flex-start・center・flex-end）はアイテムを一方向に寄せる指定、後半の3つ（space-between・space-around・space-evenly）は余白をアイテムのあいだに配る指定です。

言葉だけでは space-around と space-evenly の違いがつかみにくいので、実際の並びをデモで見比べてみましょう。下の CSS タブで各行の justify-content の値を書き換えると、箱の並びがどう変わるかをその場で確認できます。

<div class="board">
  <div class="row flex-start">
    <span class="label">flex-start</span>
    <div class="items"><div class="box">1</div><div class="box">2</div><div class="box">3</div></div>
  </div>
  <div class="row center">
    <span class="label">center</span>
    <div class="items"><div class="box">1</div><div class="box">2</div><div class="box">3</div></div>
  </div>
  <div class="row flex-end">
    <span class="label">flex-end</span>
    <div class="items"><div class="box">1</div><div class="box">2</div><div class="box">3</div></div>
  </div>
  <div class="row between">
    <span class="label">space-between</span>
    <div class="items"><div class="box">1</div><div class="box">2</div><div class="box">3</div></div>
  </div>
  <div class="row around">
    <span class="label">space-around</span>
    <div class="items"><div class="box">1</div><div class="box">2</div><div class="box">3</div></div>
  </div>
  <div class="row evenly">
    <span class="label">space-evenly</span>
    <div class="items"><div class="box">1</div><div class="box">2</div><div class="box">3</div></div>
  </div>
</div>

.board {
  font-family: sans-serif;
}

.label {
  display: block;
  font-size: 13px;
  color: #555;
  margin-bottom: 4px;
}

/* 横並びにする親要素。justify-content は flex で効く */
.items {
  display: flex;
  background: #f0f2f5;
  border: 1px solid #ddd;
  padding: 8px;
  margin-bottom: 16px;
  /* gap で箱どうしの最低限の間隔を確保 */
  gap: 8px;
}

.box {
  background: #007bff;
  color: #fff;
  width: 56px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

/* ここが今回の主役。値ごとに並びが変わる */
.flex-start .items { justify-content: flex-start; }
.center .items     { justify-content: center; }
.flex-end .items   { justify-content: flex-end; }
.between .items    { justify-content: space-between; }
.around .items     { justify-content: space-around; }
.evenly .items     { justify-content: space-evenly; }

前半の3つは余白をすべてアイテムの外側（寄せた反対側）に置くのに対し、後半の3つは余白をアイテムのあいだに分配します。space-between は両端にアイテムがぴったり付き、space-evenly は端の余白も含めてすべてが同じ幅になる、という違いに注目すると区別しやすくなります。

よくある使いどころ

ヘッダーでロゴとメニューを左右に分ける

サイトのヘッダーで「左にロゴ、右にナビゲーション」というレイアウトは、space-between がそのまま使えます。子要素を2つ置いて justify-content: space-between を指定すると、片方が左端、もう片方が右端に張り付きます。

.header {
  display: flex;
  justify-content: space-between; /* ロゴを左端、メニューを右端へ */
  align-items: center;            /* 縦方向は中央でそろえる */
}

ボタンやカードを中央にそろえる

1つのボタンや、横並びのカードをコンテンツの中央に置きたいときは center が便利です。文章の text-align: center と違い、ブロック要素そのものを中央に寄せられます。縦方向も中央にそろえたい場合は、次のように align-items: center を組み合わせます。

.box {
  display: flex;
  justify-content: center; /* 横方向の中央 */
  align-items: center;     /* 縦方向の中央 */
  height: 200px;
}

この justify-content: center と align-items: center の組み合わせは、要素を上下左右の中央に置く定番の方法としてよく使われます。

justify-content と align-items の違い

名前が似ているため混同しやすいのが justify-content と align-items です。両者は「動かす方向」が違います。justify-content は主軸方向（初期状態では横）、align-items は主軸と直交する交差軸方向（初期状態では縦）の配置を担当します。

なお flex-direction: column にして縦並びにすると主軸が縦になるため、justify-content が上下、align-items が左右の配置に入れ替わります。「justify-content は主軸、align-items は交差軸」と方向の関係で覚えておくと、向きが変わっても迷いません。

justify-content が効かないとき

親要素に display: flex がない

もっとも多いのが、justify-content を指定した要素に display: flex（または display: grid）が付いていないケースです。justify-content は Flexbox / Grid のためのプロパティなので、通常のブロック要素に書いても何も起こりません。配置が変わらないときは、まず親要素に display: flex があるかを確認してください。

アイテムが横幅いっぱいに広がっている

justify-content は「余っている幅」を配るプロパティなので、アイテムが親要素の幅をすべて使い切っていると、動かす余白がなく見た目が変わりません。たとえば子要素に flex: 1 や width: 100% が付いて伸びきっていると、center にしても space-between にしても変化が出ないことがあります。アイテムの幅を内容に合わせるか、伸びすぎている指定を見直すと、余白が生まれて配置が効くようになります。

動かしたい方向と軸がずれている

「縦に中央寄せしたいのに justify-content: center が効かない」という場合は、軸の取り違えが原因です。flex-direction: row（初期値）では justify-content は横方向の配置なので、縦方向に動かしたいなら align-items を使います。意図した方向に動かないときは、主軸と交差軸のどちらを操作したいのかを確認しましょう。

まとめ

justify-content は、Flexbox の主軸方向（初期状態では横）の配置と余白の配り方を決めるプロパティです。要点を振り返ります。

• display: flex を指定した親要素に書く（アイテム側ではない）
• flex-start・center・flex-end はアイテムを一方向に寄せる
• space-between・space-around・space-evenly は余白をアイテムのあいだに配る
• 横方向は justify-content、縦方向は align-items と覚える
• 効かないときは「display: flex があるか」「動かす余白が残っているか」を確認する

まずは center と space-between の2つを押さえておけば、中央寄せと両端振り分けという頻出のレイアウトに対応できます。慣れてきたら space-around や space-evenly も使い分けてみてください。

参考ページ

• justify-content – CSS: カスケーディングスタイルシート | MDN
• align-items – CSS: カスケーディングスタイルシート | MDN
• CSS フレックスボックスレイアウト | MDN