MENU
  1. ホーム
  2. CSS
  3. 【CSS】justify-contentの使い方：align-itemsとの違いや効かない原因

【CSS】justify-contentの使い方：align-itemsとの違いや効かない原因

CSS
css-justify-content

CSSのjustify-contentは、FlexboxやGridレイアウトにおいて、要素の配置や余白の分配をコントロールするプロパティです。

本記事では、中央寄せや両端揃えなどの基本的な使い方、align-itemsとの違い、実務で直面する「指定したのに効かない」トラブルの解決策を解説します。

また、CSSに関するカテゴリーページから学びたい内容を決めたい人は、以下のCSSページをご確認ください。

CSS | Code Stock
目次

justify-contentとは：基本と他のプロパティとの違い

Webサイトのレイアウトを組む際、要素を横並びにしたり、等間隔に配置したりするために欠かせないのがjustify-contentプロパティです。

ここでは、justify-contentの使い方について解説します。

justify-contentとは：基本と他のプロパティとの違い
  • 主軸の配置を決める役割と初期値
  • align-itemsとの違いと使い分け
  • justify-itemsとの違い

主軸の配置を決める役割と初期値

justify-contentの役割は、Flexboxにおいて「主軸に沿ったアイテムの配置や余白の割り振り」を決めることです。

デフォルトの設定（flex-direction: row;）では、主軸は「横方向（左から右）」になります。

プロパティを記述しなかった場合のjustify-contentはflex-startとなり、アイテムはコンテナの開始位置（左側）に詰めて配置されます。

ここから、center（中央寄せ）や space-between（両端揃え）などの値を指定してレイアウトを整えていきます。

レイアウトを組む際は、「justify-contentを書く前に、親要素が Flexbox コンテナになっているかを確認し、主軸の方向を脳内でイメージすること」です。

これを意識するだけで、レイアウト崩れの9割は防げます。

⭕️ 主軸（横方向）の配置をコントロールする

flex-start
(デフォルト / 左寄せ)

1
2
3

center
(中央寄せ)

1
2
3

space-between
(両端に配置して均等間隔)

1
2
3
/* 💡 要素を横に並べて、配置を指定する */
.container {
  display: flex; /* 🚨 これがないと justify-content は効かない！ */
  justify-content: space-between; /* 💡 両端揃え */
}
HTMLコード表示
<div class="justify-basic-layout-wrapper">
  
  <p class="justify-basic-caption">⭕️ 主軸（横方向）の配置をコントロールする</p>

  <div class="justify-basic-demo-area">
    
    <div class="justify-basic-item">
      <p class="justify-basic-label">flex-start<br><small>(デフォルト / 左寄せ)</small></p>
      <div class="flex-container is-flex-start">
        <div class="flex-box">1</div>
        <div class="flex-box">2</div>
        <div class="flex-box">3</div>
      </div>
    </div>

    <div class="justify-basic-item">
      <p class="justify-basic-label">center<br><small>(中央寄せ)</small></p>
      <div class="flex-container is-center">
        <div class="flex-box">1</div>
        <div class="flex-box">2</div>
        <div class="flex-box">3</div>
      </div>
    </div>

    <div class="justify-basic-item">
      <p class="justify-basic-label">space-between<br><small>(両端に配置して均等間隔)</small></p>
      <div class="flex-container is-space-between">
        <div class="flex-box">1</div>
        <div class="flex-box">2</div>
        <div class="flex-box">3</div>
      </div>
    </div>

  </div>

  <div class="justify-basic-code-area">
    <span class="hl-comment">/* 💡 要素を横に並べて、配置を指定する */</span><br>
    <span class="hl-blue">.container</span> {<br>
      <span class="hl-green">display:</span> <span class="hl-red">flex;</span> <span class="hl-comment">/* 🚨 これがないと justify-content は効かない！ */</span><br>
      <span class="hl-green">justify-content:</span> <span class="hl-red">space-between;</span> <span class="hl-comment">/* 💡 両端揃え */</span><br>
    }
  </div>

</div>
CSSコード表示
.justify-basic-layout-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.justify-basic-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.justify-basic-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.justify-basic-item {
  width: 100%;
}

.justify-basic-label {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

/* Flexコンテナの共通設定 */
.flex-container {
  display: flex;
  background-color: #dee2e6;
  padding: 10px;
  border-radius: 6px;
  height: 60px;
}

/* 中のアイテム（箱） */
.flex-box {
  background-color: #0d6efd;
  color: white;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-weight: bold;
}

/* ＝💡 実践コード：justify-contentの違い＝ */
.is-flex-start {
  justify-content: flex-start;
}

.is-center {
  justify-content: center;
}

.is-space-between {
  justify-content: space-between;
}

/* ＝コード解説エリア＝ */
.justify-basic-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
}

.hl-blue { color: #61afef; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }
.hl-comment { color: #6c757d; font-style: italic; }

align-itemsとの違いと使い分け

Flexboxを学ぶ上で一度は混乱するのが、justify-contentとalign-itemsの違いです。

結論から言うと、以下のように「軸」が異なります。

  • justify-content ： 主軸（デフォルトは横方向・水平）の配置を決める
  • align-items ： 交差軸（デフォルトは縦方向・垂直）の配置を決める

「上下左右の中央寄せ」を実装する際は、「display: flex;、justify-content: center;、align-items: center;の3点セットを記述すること」です。

⭕️ 「横」のjustify、「縦」のalign。2つ揃って完全中央！

❌ 罠（justifyのみ）
横だけ中央になる

BOX

⭕️ 成功（両方指定）
ど真ん中（上下左右中央）

BOX
/* ❌ 縦方向の指定を忘れてしまう */
.box-fail {
  display: flex;
  justify-content: center; /* 💡 これだけだと横方向しか中央にならない */
}

/* ⭕️ 完全中央寄せの3点セット！ */
.box-success {
  display: flex;
  justify-content: center; /* 💡 横（主軸）を中央に */
  align-items: center; /* 💡 縦（交差軸）を中央に */
}
HTMLコード表示
<div class="justify-align-layout-wrapper">
  
  <p class="justify-align-caption">⭕️ 「横」のjustify、「縦」のalign。2つ揃って完全中央！</p>

  <div class="justify-align-demo-area">
    
    <div class="justify-align-item">
      <p class="justify-align-label" style="color:#dc3545;">❌ 罠（justifyのみ）<br><small>横だけ中央になる</small></p>
      <!-- 高さを設けたコンテナ -->
      <div class="flex-align-container is-only-justify">
        <div class="flex-align-box">BOX</div>
      </div>
    </div>

    <div class="justify-align-item">
      <p class="justify-align-label" style="color:#0d6efd;">⭕️ 成功（両方指定）<br><small>ど真ん中（上下左右中央）</small></p>
      
      <div class="flex-align-container is-both-center">
        <div class="flex-align-box">BOX</div>
      </div>
    </div>

  </div>

  <div class="justify-align-code-area">
    <span class="hl-comment">/* ❌ 縦方向の指定を忘れてしまう */</span><br>
    <span class="hl-blue">.box-fail</span> {<br>
      <span class="hl-green">display:</span> <span class="hl-red">flex;</span><br>
      <span class="hl-green">justify-content:</span> <span class="hl-red">center;</span> <span class="hl-comment">/* 💡 これだけだと横方向しか中央にならない */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 完全中央寄せの3点セット！ */</span><br>
    <span class="hl-blue">.box-success</span> {<br>
      <span class="hl-green">display:</span> <span class="hl-red">flex;</span><br>
      <span class="hl-green">justify-content:</span> <span class="hl-red">center;</span> <span class="hl-comment">/* 💡 横（主軸）を中央に */</span><br>
      <span class="hl-green">align-items:</span> <span class="hl-red">center;</span>     <span class="hl-comment">/* 💡 縦（交差軸）を中央に */</span><br>
    }
  </div>

</div>
CSSコード表示
.justify-align-layout-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.justify-align-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.justify-align-demo-area {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  background-color: #e9ecef;
  padding: 40px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.justify-align-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 200px;
}

.justify-align-label {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 15px;
  line-height: 1.5;
}

/* 高さを持たせたデモ用コンテナ */
.flex-align-container {
  width: 100%;
  height: 150px;
  background-color: #dee2e6;
  border: 2px solid #adb5bd;
  border-radius: 6px;
  display: flex; /* Flexboxを有効化 */
}

/* 中のアイテム */
.flex-align-box {
  background-color: #0dccea;
  color: white;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* ＝❌ 罠：justify-contentのみ＝ */
.is-only-justify {
  justify-content: center;
  /* align-itemsを指定していないため、上端に張り付く（または伸びる） */
}

/* ＝⭕️ 正解：完全中央寄せ＝ */
.is-both-center {
  justify-content: center;
  align-items: center; /* 💡 これで縦も真ん中になる！ */
}

/* ＝コード解説エリア＝ */
.justify-align-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
}

align-itemsの使い方を詳しく知りたい人は「【CSS】align-itemsの使い方：縦の中央揃えからjustify-contentとの違い」を一読ください。

【CSS】align-itemsの使い方：縦の中央揃えからjustify-contentとの違い

justify-itemsとの違い

CSSレイアウトを学んでいくと、「justify-content」と名前がそっくりな「justify-items」というプロパティに出会います。

決定的な違いは、「どのレイアウトモジュールで使うか」です。

結論から言うと、Flexboxではjustify-itemsは一切効きません。

これはGridレイアウトにおいて、「各グリッドセルの中でのアイテムの水平方向の配置」を決めるためのプロパティだからです。

  • Gridにおけるjustify-content
    グリッド全体（マス目の集合体）を、親コンテナの中でどう配置するか。
  • Gridにおけるjustify-items
    各マス目（セル）の中で、アイテム自身をどう配置するか（例：セル内で中央寄せなど）。

レイアウトプロパティの混同を防ぐには、「『content』は全体の割り振り、『items』は個々の要素の配置」と覚え、「Flexboxで水平方向をいじるならjustify-contentを使う」と脳内にルール付けすることです。

Gridを使い始めるまではjustify-itemsの存在は一旦忘れてしまっても構いません。

⭕️ Gridレイアウトでの「全体配置（content）」と「セル内配置（items）」の違い

justify-content: center;
(グリッド全体がコンテナの中央に寄る)

1
2
3
4

justify-items: center;
(グリッド全体は広がり、各セルの中で要素が中央に寄る)

1
2
3
4
/* 🚨 注意：Flexboxでは justify-items は無効です！ */

/* 💡 Gridレイアウトでの justify-content（全体の配置） */
.grid-content-demo {
  display: grid;
  justify-content: center; /* 💡 作られたマス目全体を中央に寄せる */
}

/* 💡 Gridレイアウトでの justify-items（各セルの中での配置） */
.grid-items-demo {
  display: grid;
  justify-items: center; /* 💡 各マス目（セル）の中で、アイテムを中央に寄せる */
}
HTMLコード表示
<div class="justify-grid-layout-wrapper">
  
  <p class="justify-grid-caption">⭕️ Gridレイアウトでの「全体配置（content）」と「セル内配置（items）」の違い</p>

  <div class="justify-grid-demo-area">
    
    <div class="justify-grid-item" style="width: 100%;">
      <p class="justify-grid-label">justify-content: center;<br><small>(グリッド全体がコンテナの中央に寄る)</small></p>
      
      <div class="grid-container is-grid-content">
        <div class="grid-box">1</div>
        <div class="grid-box">2</div>
        <div class="grid-box">3</div>
        <div class="grid-box">4</div>
      </div>
    </div>

    <div class="justify-grid-item" style="width: 100%;">
      <p class="justify-grid-label">justify-items: center;<br><small>(グリッド全体は広がり、各セルの中で要素が中央に寄る)</small></p>
      
      <div class="grid-container is-grid-items">
        <!-- 視認性のため、要素の幅を小さくする -->
        <div class="grid-box" style="width: 40px;">1</div>
        <div class="grid-box" style="width: 40px;">2</div>
        <div class="grid-box" style="width: 40px;">3</div>
        <div class="grid-box" style="width: 40px;">4</div>
      </div>
    </div>

  </div>

  <div class="justify-grid-code-area">
    <span class="hl-comment">/* 🚨 注意：Flexboxでは justify-items は無効です！ */</span><br><br>

    <span class="hl-comment">/* 💡 Gridレイアウトでの justify-content（全体の配置） */</span><br>
    <span class="hl-blue">.grid-content-demo</span> {<br>
      <span class="hl-green">display:</span> <span class="hl-red">grid;</span><br>
      <span class="hl-green">justify-content:</span> <span class="hl-red">center;</span> <span class="hl-comment">/* 💡 作られたマス目全体を中央に寄せる */</span><br>
    }<br><br>

    <span class="hl-comment">/* 💡 Gridレイアウトでの justify-items（各セルの中での配置） */</span><br>
    <span class="hl-blue">.grid-items-demo</span> {<br>
      <span class="hl-green">display:</span> <span class="hl-red">grid;</span><br>
      <span class="hl-green">justify-items:</span> <span class="hl-red">center;</span> <span class="hl-comment">/* 💡 各マス目（セル）の中で、アイテムを中央に寄せる */</span><br>
    }
  </div>

</div>
CSSコード表示
.justify-grid-layout-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.justify-grid-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.justify-grid-demo-area {
  display: flex;
  flex-direction: column;
  gap: 40px;
  background-color: #e9ecef;
  padding: 40px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.justify-grid-item {
  text-align: center;
}

.justify-grid-label {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  line-height: 1.5;
}

/* Gridコンテナの共通設定 */
.grid-container {
  display: grid;
  /* 2列のグリッドを作成 */
  grid-template-columns: 100px 100px; 
  gap: 10px;
  background-color: #dee2e6;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #adb5bd;
}

/* 中のアイテム */
.grid-box {
  background-color: #6f42c1;
  color: white;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border-radius: 4px;
}

/* ＝💡 実践コード：Gridでの違い＝ */

/* justify-content: center の場合（グリッド全体が真ん中に寄る） */
.is-grid-content {
  justify-content: center;
}

/* justify-items: center の場合（各セルの中でアイテムが真ん中に寄る） */
/* ※コンテナ全体は横幅いっぱいに広がる */
.is-grid-items {
  /* 分かりやすいように1列の幅を広げる（1fr = 残り幅いっぱい） */
  grid-template-columns: 1fr 1fr; 
  justify-items: center;
  /* セルの枠線を見えるようにするための擬似的な指定 */
  background-image: linear-gradient(90deg, transparent 49.5%, #adb5bd 49.5%, #adb5bd 50.5%, transparent 50.5%);
}

/* ＝コード解説エリア＝ */
.justify-grid-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

FlexboxやGridの使い方を詳しく知りたい人は以下から一読ください。

justify-contentで使える値と配置

justify-contentを使いこなすには、指定できる値を理解し、目的に応じて使い分ける必要があります。

値を変えるだけで、アイテムを端に寄せたり、中央に集めたり、画面幅に合わせて等間隔レイアウトを作ったりと自由度は向上します。

ここでは、実務で使用する配置指定と「思っていた位置に配置されない」原因についてサンプルコードを交えて解説します。

justify-contentで使える値と配置
  • 中央寄せと左寄せ・右寄せ
  • 要素を等間隔に配置する

中央寄せと左寄せ・右寄せ

基本は、要素の中央寄せやコンテナの端に寄せる設定です。

左寄せにするにはflex-start、右寄せにするにはflex-endを使用します。

これらは、ヘッダーのロゴを左に、ナビゲーションメニューを右に配置するといった典型的なFlexboxレイアウトで役立ちます。

配置プロパティを書く際は、「Flexboxではleftやrightという言葉を忘れ、flex-startとflex-endを使うこと」です。

これを意識するだけで、無効なプロパティによるレイアウト崩れを防ぐことができます。

※近年のCSSの仕様アップデートにより、rightやleftも正式にサポートされるようになりました。
ただし、実務では、多言語対応の観点から、物理的なrightではなく、論理的なflex-endを使うのが現在でもベストプラクティスとされています。

⭕️ Flexboxでの左右の指定は「start」と「end」を使う！

❌ 罠（rightを指定）
無効になり左に留まる

A
B

⭕️ 成功（flex-end）
正しく右寄せになる

A
B

center
(中央寄せ)

A
B
/* ❌ 直感で right と書いてしまう */
.box-fail {
  display: flex;
  justify-content: right; /* 🚨 Flexboxでは無効な値！効かない */
}

/* ⭕️ 右寄せは「flex-end」、左寄せは「flex-start」 */
.box-success {
  display: flex;
  justify-content: flex-end; /* 💡 主軸の「終わり」に揃える */
}
HTMLコード表示
<div class="justify-align-values-layout-wrapper">
  
  <p class="justify-align-values-caption">⭕️ Flexboxでの左右の指定は「start」と「end」を使う！</p>

  <div class="justify-align-values-demo-area">
    
    <!-- ❌ 失敗：leftやrightを指定してしまう -->
    <div class="justify-align-values-item">
      <p class="justify-align-values-label" style="color:#dc3545;">❌ 罠（rightを指定）<br><small>無効になり左に留まる</small></p>
      <div class="flex-values-container is-bad-right">
        <div class="flex-values-box">A</div>
        <div class="flex-values-box">B</div>
      </div>
    </div>

    <!-- ⭕️ 成功：flex-endを指定 -->
    <div class="justify-align-values-item">
      <p class="justify-align-values-label" style="color:#0d6efd;">⭕️ 成功（flex-end）<br><small>正しく右寄せになる</small></p>
      <div class="flex-values-container is-good-end">
        <div class="flex-values-box">A</div>
        <div class="flex-values-box">B</div>
      </div>
    </div>

    <!-- ⭕️ 成功：centerを指定 -->
    <div class="justify-align-values-item">
      <p class="justify-align-values-label">center<br><small>(中央寄せ)</small></p>
      <div class="flex-values-container is-center-value">
        <div class="flex-values-box">A</div>
        <div class="flex-values-box">B</div>
      </div>
    </div>

  </div>

  <div class="justify-align-values-code-area">
    <span class="hl-comment">/* ❌ 直感で right と書いてしまう */</span><br>
    <span class="hl-blue">.box-fail</span> {<br>
      <span class="hl-green">display:</span> <span class="hl-red">flex;</span><br>
      <span class="hl-green">justify-content:</span> <span class="hl-red">right;</span> <span class="hl-comment">/* 🚨 Flexboxでは無効な値！効かない */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 右寄せは「flex-end」、左寄せは「flex-start」 */</span><br>
    <span class="hl-blue">.box-success</span> {<br>
      <span class="hl-green">display:</span> <span class="hl-red">flex;</span><br>
      <span class="hl-green">justify-content:</span> <span class="hl-red">flex-end;</span> <span class="hl-comment">/* 💡 主軸の「終わり」に揃える */</span><br>
    }
  </div>

</div>
CSSコード表示
.justify-align-values-layout-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.justify-align-values-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.justify-align-values-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.justify-align-values-item {
  width: 100%;
}

.justify-align-values-label {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  line-height: 1.5;
}

/* Flexコンテナの共通設定 */
.flex-values-container {
  display: flex;
  background-color: #dee2e6;
  padding: 10px;
  border-radius: 6px;
  height: 60px;
  border: 1px solid #adb5bd;
}

/* 中のアイテム（箱） */
.flex-values-box {
  background-color: #0dccea;
  color: white;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-weight: bold;
  margin-right: 10px; /* 見やすいように少し隙間を空ける */
}
/* 最後の要素の右マージンを消す */
.flex-values-box:last-child {
  margin-right: 0;
}

/* ＝❌ 罠：justify-content: right を指定＝ */
.is-bad-right {
  /* Flexboxでは無効な値として無視され、デフォルトのflex-start（左寄せ）になる */
  justify-content: right; 
}

/* ＝⭕️ 正解：justify-content: flex-end を指定＝ */
.is-good-end {
  justify-content: flex-end;
}

/* ＝⭕️ 実践：justify-content: center を指定＝ */
.is-center-value {
  justify-content: center;
}

/* ＝コード解説エリア＝ */
.justify-align-values-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

様々な要素に対する中央寄せを知りたい人は「【CSS】中央寄せする手法：上下左右・画像・効かない時の解決策」を一読ください。

【CSS】中央寄せする手法：上下左右・画像・効かない時の解決策

要素を等間隔に配置する

要素と要素の間に自動で余白を計算し、等間隔に並べてくれるのがspace-系の値です。

  • space-between
    最初と最後の要素を両端にくっつけ、残りの要素を等間隔に配置します。
    ヘッダー（左にロゴ、右にメニュー）などでよく使われます。
  • space-around
    各要素の「両側」に均等な余白を設けます。
    両端の要素とコンテナの壁との間には、要素間の「半分の幅」の余白ができます。
  • space-evenly
    すべての要素間、および両端と要素の間の余白が「同じ（均等）」になります。
    カード型のリストを綺麗に並べる際に便利です。

複数行にまたがるリスト（flex-wrap: wrap;を併用する場合）を作る際は、「space-betweenは使わずjustify-content: flex-start;を指定した上でgapプロパティを使って要素間の余白をコントロールすること」です。

space-系の値は、あくまで「1行（または1列）の中での余白調整」にのみ使うのが安全です。

⭕️ space系の違いと、複数行（wrap）で起こる大惨事

space-between
(両端ピッタリ、間は均等)

1
2
3

space-around
(両端の余白は、間の余白の「半分」)

1
2
3

space-evenly
(すべての余白が「完全に同じ」)

1
2
3

❌ 罠（複数行で space-between）
最後の行の要素数が足りないと左右に分断される

1
2
3
4
5
/* ❌ 複数行のカードリストで space-between を使う */
.list-fail {
  display: flex;
  flex-wrap: wrap; /* 💡 複数行に折り返す */
  justify-content: space-between; /* 🚨 最後の行が2つの時、左右にポツンと分かれてしまう！ */
}

/* ⭕️ 複数行リストは flex-start ＋ gap で作る */
.list-success {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* 💡 左詰めに固定する */
  gap: 20px; /* 💡 要素間の余白は gap プロパティに任せる */
}
HTMLコード表示
<div class="justify-space-layout-wrapper">
  
  <p class="justify-space-caption">⭕️ space系の違いと、複数行（wrap）で起こる大惨事</p>

  <div class="justify-space-demo-area">
    
    <!-- 💡 space-系の違い -->
    <div class="justify-space-item" style="width: 100%;">
      <p class="justify-space-label">space-between<br><small>(両端ピッタリ、間は均等)</small></p>
      <div class="flex-space-container is-space-between">
        <div class="flex-space-box">1</div>
        <div class="flex-space-box">2</div>
        <div class="flex-space-box">3</div>
      </div>
    </div>

    <div class="justify-space-item" style="width: 100%;">
      <p class="justify-space-label">space-around<br><small>(両端の余白は、間の余白の「半分」)</small></p>
      <div class="flex-space-container is-space-around">
        <div class="flex-space-box">1</div>
        <div class="flex-space-box">2</div>
        <div class="flex-space-box">3</div>
      </div>
    </div>

    <div class="justify-space-item" style="width: 100%; margin-bottom: 20px;">
      <p class="justify-space-label">space-evenly<br><small>(すべての余白が「完全に同じ」)</small></p>
      <div class="flex-space-container is-space-evenly">
        <div class="flex-space-box">1</div>
        <div class="flex-space-box">2</div>
        <div class="flex-space-box">3</div>
      </div>
    </div>

    <!-- ❌ 失敗：複数行でspace-betweenを使った罠 -->
    <div class="justify-space-item" style="width: 100%;">
      <p class="justify-space-label" style="color:#dc3545;">❌ 罠（複数行で space-between）<br><small>最後の行の要素数が足りないと左右に分断される</small></p>
      <div class="flex-space-container is-wrap-fail" style="height: auto;">
        <div class="flex-space-box">1</div>
        <div class="flex-space-box">2</div>
        <div class="flex-space-box">3</div>
        <div class="flex-space-box" style="background-color: #dc3545;">4</div>
        <div class="flex-space-box" style="background-color: #dc3545;">5</div>
      </div>
    </div>

  </div>

  <div class="justify-space-code-area">
    <span class="hl-comment">/* ❌ 複数行のカードリストで space-between を使う */</span><br>
    <span class="hl-blue">.list-fail</span> {<br>
      <span class="hl-green">display:</span> <span class="hl-red">flex;</span><br>
      <span class="hl-green">flex-wrap:</span> <span class="hl-red">wrap;</span> <span class="hl-comment">/* 💡 複数行に折り返す */</span><br>
      <span class="hl-green">justify-content:</span> <span class="hl-red">space-between;</span> <span class="hl-comment">/* 🚨 最後の行が2つの時、左右にポツンと分かれてしまう！ */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 複数行リストは flex-start ＋ gap で作る */</span><br>
    <span class="hl-blue">.list-success</span> {<br>
      <span class="hl-green">display:</span> <span class="hl-red">flex;</span><br>
      <span class="hl-green">flex-wrap:</span> <span class="hl-red">wrap;</span><br>
      <span class="hl-green">justify-content:</span> <span class="hl-red">flex-start;</span> <span class="hl-comment">/* 💡 左詰めに固定する */</span><br>
      <span class="hl-green">gap:</span> <span class="hl-red">20px;</span> <span class="hl-comment">/* 💡 要素間の余白は gap プロパティに任せる */</span><br>
    }
  </div>

</div>
CSSコード表示
.justify-space-layout-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.justify-space-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.justify-space-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.justify-space-item {
  width: 100%;
}

.justify-space-label {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  line-height: 1.5;
}

/* Flexコンテナの共通設定 */
.flex-space-container {
  display: flex;
  background-color: #dee2e6;
  padding: 10px;
  border-radius: 6px;
  height: 60px;
  border: 1px solid #adb5bd;
}

/* 中のアイテム（箱） */
.flex-space-box {
  background-color: #6f42c1;
  color: white;
  width: 60px; /* 箱の幅を少し広げる */
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-weight: bold;
}

/* ＝💡 実践コード：等間隔の配置の違い＝ */
.is-space-between {
  justify-content: space-between;
}

.is-space-around {
  justify-content: space-around;
}

.is-space-evenly {
  justify-content: space-evenly;
}

/* ＝❌ 罠：複数行でのspace-between＝ */
.is-wrap-fail {
  flex-wrap: wrap; /* 折り返しを有効化 */
  justify-content: space-between; /* 余白を自動計算 */
  gap: 10px; /* 行間用のgap */
}
/* このデモでは、コンテナ幅に対して3つで折り返すように強制 */
.is-wrap-fail .flex-space-box {
  width: 30%; /* 3つでほぼ1行が埋まるサイズ */
}

/* ＝コード解説エリア＝ */
.justify-space-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

FlexboxとGridレイアウトでの使い方

Webレイアウトの2大巨頭であるFlexboxとGridがあります。

どちらも要素を並べるためのツールですが、justify-contentプロパティの振る舞いや「何を動かしているのか」という概念が異なります。

ここでは、実務で使われる2つのレイアウトにおいて、justify-contentをどう使いこなすのかを解説します。

FlexboxとGridレイアウトでの使い方
  • Flexboxでの横並びとコンテンツ配置
  • Gridでのグリッド全体の配置コントロール

FlexboxとGridの使い方を詳しく知りたい人は以下から一読ください。

Flexboxでの横並びとコンテンツ配置

Webデザインにおいて要素を横に並べる場合、スタンダードな手法がjustify-contentを活用したFlexboxレイアウトです。

親要素にdisplay: flex;を指定し、横並びになったアイテムたちに対して、中央寄せや両端揃えを適用してレイアウトを組みます。

ナビゲーションメニューやアイコンとテキストの横並び、カードコンポーネント内のボタン配置など、実務のあらゆる場面で登場します。

Flexboxで配置をコントロールする際は、「アイテム自身の幅を適切に保ち、親コンテナ内に『余白』を作ってからjustify-contentで分配すること」です。

効かない時は、背景色や検証ツールで「親要素のサイズ」と「子要素のサイズ」を確認し、余白が存在するかチェックする癖をつけましょう。

⭕️ Flexboxでの配置は「コンテナ内の余白」があってこそ！

❌ 罠（余白がない）
centerを指定しても動かない

Menu 1
Menu 2

⭕️ 成功（center）
余白を使って中央に配置

Menu 1
Menu 2

⭕️ 成功（space-between）
余白を間に分配

Logo
Login
/* ❌ 子要素が大きすぎて余白がない */
.nav-fail {
  display: flex;
  justify-content: center; /* 🚨 効かない！ */
}
.nav-fail .item {
  flex-grow: 1; /* 🚨 ここで子要素が親の幅いっぱいまで広がっている */
}

/* ⭕️ 子要素は適切なサイズに保ち、余白を分配する */
.nav-success {
  display: flex;
  justify-content: space-between; /* 💡 完璧なヘッダーレイアウト！ */
}
HTMLコード表示
<div class="flex-practical-layout-wrapper">
  
  <p class="flex-practical-caption">⭕️ Flexboxでの配置は「コンテナ内の余白」があってこそ！</p>

  <div class="flex-practical-demo-area">
    
    <div class="flex-practical-item">
      <p class="flex-practical-label" style="color:#dc3545;">❌ 罠（余白がない）<br><small>centerを指定しても動かない</small></p>
      <div class="flex-practical-container is-fail-full">
        <div class="flex-practical-box is-grow">Menu 1</div>
        <div class="flex-practical-box is-grow">Menu 2</div>
      </div>
    </div>

    <div class="flex-practical-item">
      <p class="flex-practical-label" style="color:#0d6efd;">⭕️ 成功（center）<br><small>余白を使って中央に配置</small></p>
      <div class="flex-practical-container is-success-center">
        <div class="flex-practical-box">Menu 1</div>
        <div class="flex-practical-box">Menu 2</div>
      </div>
    </div>

    <div class="flex-practical-item">
      <p class="flex-practical-label" style="color:#0d6efd;">⭕️ 成功（space-between）<br><small>余白を間に分配</small></p>
      <div class="flex-practical-container is-success-between">
        <div class="flex-practical-box">Logo</div>
        <div class="flex-practical-box">Login</div>
      </div>
    </div>

  </div>

  <div class="flex-practical-code-area">
    <span class="hl-comment">/* ❌ 子要素が大きすぎて余白がない */</span><br>
    <span class="hl-blue">.nav-fail</span> {<br>
      <span class="hl-green">display:</span> <span class="hl-red">flex;</span><br>
      <span class="hl-green">justify-content:</span> <span class="hl-red">center;</span> <span class="hl-comment">/* 🚨 効かない！ */</span><br>
    }<br>
    <span class="hl-blue">.nav-fail .item</span> {<br>
      <span class="hl-green">flex-grow:</span> <span class="hl-red">1;</span> <span class="hl-comment">/* 🚨 ここで子要素が親の幅いっぱいまで広がっている */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 子要素は適切なサイズに保ち、余白を分配する */</span><br>
    <span class="hl-blue">.nav-success</span> {<br>
      <span class="hl-green">display:</span> <span class="hl-red">flex;</span><br>
      <span class="hl-green">justify-content:</span> <span class="hl-red">space-between;</span> <span class="hl-comment">/* 💡 完璧なヘッダーレイアウト！ */</span><br>
    }
  </div>

</div>
CSSコード表示
.flex-practical-layout-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.flex-practical-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.flex-practical-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.flex-practical-item {
  width: 100%;
}

.flex-practical-label {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  line-height: 1.5;
}

/* Flexコンテナの共通設定 */
.flex-practical-container {
  display: flex;
  background-color: #dee2e6;
  padding: 10px;
  border-radius: 6px;
  height: 60px;
  border: 1px solid #adb5bd;
  gap: 10px; /* デフォルトの隙間 */
}

/* 中のアイテム（箱） */
.flex-practical-box {
  background-color: #0d6efd;
  color: white;
  padding: 0 15px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-weight: bold;
  font-size: 12px;
}

/* ＝❌ 罠：余白がない＝ */
.is-fail-full {
  justify-content: center; /* 余白がないので全く意味がない */
}
.is-grow {
  flex-grow: 1; /* 子要素が幅を食いつぶす原因 */
}

/* ＝⭕️ 正解：中央寄せ＝ */
.is-success-center {
  justify-content: center;
}

/* ＝⭕️ 正解：両端揃え＝ */
.is-success-between {
  justify-content: space-between;
}

/* ＝コード解説エリア＝ */
.flex-practical-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

.hl-blue { color: #61afef; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }
.hl-comment { color: #6c757d; font-style: italic; }

Gridでのグリッド全体の配置コントロール

Gridにおいてもjustify-contentは存在します。

しかし、Gridの場合は「個々のアイテム」ではなく、「マス目の集合体全体を、コンテナの中でどう配置するか」をコントロールします。

例えば、コンテナよりも小さなマス目を定義した場合、それらを中央に集めるか、マス目同士の間隔を広げて両端に配置するといった調整が可能です。

Gridでjustify-contentを効かせるには、「grid-template-columnsの値を100pxなどの固定値やautoにし、コンテナ内に『マス目が占有していない余白』を意図的に作ること」です。

1frは余白を吸収してしまうため、配置コントロールを行いたい場合は1frを使わないように設計する必要があります。

⭕️ Gridで配置するなら、マス目の幅を「1fr」にしてはいけない！

❌ 罠（1frを指定）
マス目が幅いっぱいになり、centerが効かない

1
2
3

⭕️ 成功（pxで固定）
余白が生まれ、グリッド全体が中央に寄る

1
2
3

⭕️ 成功（space-between）
マス目の間に余白が割り振られる

1
2
3
/* ❌ 列を 1fr にして余白を消してしまう */
.grid-fail {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 🚨 マス目が幅いっぱいに広がる */
  justify-content: center; /* 🚨 余白がないので効かない！ */
}

/* ⭕️ 固定値やautoで余白を作り、配置をコントロールする */
.grid-success {
  display: grid;
  grid-template-columns: repeat(3, 80px); /* 💡 マス目を小さくして余白を作る */
  justify-content: center; /* 💡 グリッド全体が真ん中に配置される！ */
}
HTMLコード表示
<div class="grid-practical-layout-wrapper">
  
  <p class="grid-practical-caption">⭕️ Gridで配置するなら、マス目の幅を「1fr」にしてはいけない！</p>

  <div class="grid-practical-demo-area">
    
    <div class="grid-practical-item">
      <p class="grid-practical-label" style="color:#dc3545;">❌ 罠（1frを指定）<br><small>マス目が幅いっぱいになり、centerが効かない</small></p>
      <div class="grid-practical-container is-fail-1fr">
        <div class="grid-practical-box">1</div>
        <div class="grid-practical-box">2</div>
        <div class="grid-practical-box">3</div>
      </div>
    </div>

    <div class="grid-practical-item">
      <p class="grid-practical-label" style="color:#0d6efd;">⭕️ 成功（pxで固定）<br><small>余白が生まれ、グリッド全体が中央に寄る</small></p>
      <div class="grid-practical-container is-success-px">
        <div class="grid-practical-box">1</div>
        <div class="grid-practical-box">2</div>
        <div class="grid-practical-box">3</div>
      </div>
    </div>

    <div class="grid-practical-item">
      <p class="grid-practical-label" style="color:#0d6efd;">⭕️ 成功（space-between）<br><small>マス目の間に余白が割り振られる</small></p>
      <div class="grid-practical-container is-success-grid-between">
        <div class="grid-practical-box">1</div>
        <div class="grid-practical-box">2</div>
        <div class="grid-practical-box">3</div>
      </div>
    </div>

  </div>

  <div class="grid-practical-code-area">
    <span class="hl-comment">/* ❌ 列を 1fr にして余白を消してしまう */</span><br>
    <span class="hl-blue">.grid-fail</span> {<br>
      <span class="hl-green">display:</span> <span class="hl-red">grid;</span><br>
      <span class="hl-green">grid-template-columns:</span> <span class="hl-red">repeat(3, 1fr);</span> <span class="hl-comment">/* 🚨 マス目が幅いっぱいに広がる */</span><br>
      <span class="hl-green">justify-content:</span> <span class="hl-red">center;</span> <span class="hl-comment">/* 🚨 余白がないので効かない！ */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 固定値やautoで余白を作り、配置をコントロールする */</span><br>
    <span class="hl-blue">.grid-success</span> {<br>
      <span class="hl-green">display:</span> <span class="hl-red">grid;</span><br>
      <span class="hl-green">grid-template-columns:</span> <span class="hl-red">repeat(3, 80px);</span> <span class="hl-comment">/* 💡 マス目を小さくして余白を作る */</span><br>
      <span class="hl-green">justify-content:</span> <span class="hl-red">center;</span> <span class="hl-comment">/* 💡 グリッド全体が真ん中に配置される！ */</span><br>
    }
  </div>

</div>
CSSコード表示
.grid-practical-layout-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.grid-practical-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.grid-practical-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.grid-practical-item {
  width: 100%;
}

.grid-practical-label {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  line-height: 1.5;
}

/* Gridコンテナの共通設定 */
.grid-practical-container {
  display: grid;
  background-color: #dee2e6;
  padding: 10px;
  border-radius: 6px;
  height: 60px;
  border: 1px solid #adb5bd;
  gap: 10px;
}

/* 中のアイテム（箱） */
.grid-practical-box {
  background-color: #6f42c1;
  color: white;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-weight: bold;
  font-size: 14px;
}

/* ＝❌ 罠：1frで余白がない＝ */
.is-fail-1fr {
  grid-template-columns: 1fr 1fr 1fr; /* 幅いっぱいになる */
  justify-content: center; /* 効かない */
}

/* ＝⭕️ 正解：pxで固定して中央寄せ＝ */
.is-success-px {
  grid-template-columns: 60px 60px 60px; /* 固定値で余白を作る */
  justify-content: center; /* マス目全体が中央に寄る */
}

/* ＝⭕️ 正解：pxで固定して両端揃え＝ */
.is-success-grid-between {
  grid-template-columns: 60px 60px 60px;
  justify-content: space-between; /* マス目同士が離れる */
}

/* ＝コード解説エリア＝ */
.grid-practical-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

.hl-blue { color: #61afef; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }
.hl-comment { color: #6c757d; font-style: italic; }

justify-contentが効かない！原因と解決策

「構文は間違っていないはずなのに、justify-contentが効かない！」といった場面が多々あります。

特に、FlexboxやGridレイアウトにおいて、「両端に寄らない」「真ん中に来ない」といったトラブルに直面しがちです。

justify-contentが効かない時、CSSのバグを疑う前に確認すべき「ブラウザの仕様」と「レイアウトのルール」があります。

ここでは、現場で遭遇する2つの原因と解決策を解説します。

justify-contentが効かない！原因と解決策
  • 親要素の幅が足りない・子要素がはみ出している
  • 縦方向に配置したい場合の勘違い

親要素の幅が足りない・子要素がはみ出している

justify-contentが効かない原因の第1位が、「親要素の中に、分配する『余白』が存在しない」という状態です。

justify-contentは、要素を並べた後に「余ったスペース」をどのように割り振るかを決めるプロパティです。

そのため、親要素の幅が子要素の合計幅と同じだったり、逆に子要素が大きすぎてはみ出していたりすると、割り振る余白がないため動きません。

効かない時は、「親要素と子要素に一時的にborder: 2px solid red;や背景色をつけて、『余白』が存在するかを視覚的に確認すること」です。

余白がない場合は、親要素にwidth: 100%;を指定するなどの対処を行い、スペースを確保しましょう。

⭕️ 効かない時は「親の幅」と「余白」を疑え！

❌ 罠（inline-flexの罠）
親が縮んで余白がなく、centerが効かない

A
B

⭕️ 成功（display: flex）
親に幅があり、余白を使って中央に寄る

A
B
/* ❌ 親要素の幅が中身に合わせて縮んでしまっている */
.container-fail {
  display: inline-flex; /* 🚨 親の幅が最小限に縮む！ */
  justify-content: center; /* 🚨 動かすための「余白」がないので無効 */
}

/* ⭕️ display: flex; で親に幅を持たせる */
.container-success {
  display: flex; /* 💡 デフォルトで横幅100%になり、余白が生まれる */
  justify-content: center; /* 💡 余白を左右に等分して中央に配置！ */
}
HTMLコード表示
<div class="justify-width-layout-wrapper">
  
  <p class="justify-width-caption">⭕️ 効かない時は「親の幅」と「余白」を疑え！</p>

  <div class="justify-width-demo-area">
    
    <div class="justify-width-item">
      <p class="justify-width-label" style="color:#dc3545;">❌ 罠（inline-flexの罠）<br><small>親が縮んで余白がなく、centerが効かない</small></p>
      
      <div class="flex-width-container is-fail-inline">
        <div class="flex-width-box">A</div>
        <div class="flex-width-box">B</div>
      </div>
    </div>

    <div class="justify-width-item">
      <p class="justify-width-label" style="color:#0d6efd;">⭕️ 成功（display: flex）<br><small>親に幅があり、余白を使って中央に寄る</small></p>
      
      <div class="flex-width-container is-success-block">
        <div class="flex-width-box">A</div>
        <div class="flex-width-box">B</div>
      </div>
    </div>

  </div>

  <div class="justify-width-code-area">
    <span class="hl-comment">/* ❌ 親要素の幅が中身に合わせて縮んでしまっている */</span><br>
    <span class="hl-blue">.container-fail</span> {<br>
      <span class="hl-green">display:</span> <span class="hl-red">inline-flex;</span> <span class="hl-comment">/* 🚨 親の幅が最小限に縮む！ */</span><br>
      <span class="hl-green">justify-content:</span> <span class="hl-red">center;</span> <span class="hl-comment">/* 🚨 動かすための「余白」がないので無効 */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ display: flex; で親に幅を持たせる */</span><br>
    <span class="hl-blue">.container-success</span> {<br>
      <span class="hl-green">display:</span> <span class="hl-red">flex;</span> <span class="hl-comment">/* 💡 デフォルトで横幅100%になり、余白が生まれる */</span><br>
      <span class="hl-green">justify-content:</span> <span class="hl-red">center;</span> <span class="hl-comment">/* 💡 余白を左右に等分して中央に配置！ */</span><br>
    }
  </div>

</div>
CSSコード表示
.justify-width-layout-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.justify-width-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.justify-width-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
  /* デモエリア全体は左寄せにしておく */
  align-items: flex-start; 
}

.justify-width-item {
  width: 100%;
}

.justify-width-label {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  line-height: 1.5;
}

/* 中のアイテム（箱） */
.flex-width-box {
  background-color: #6c757d;
  color: white;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-weight: bold;
  margin: 0 5px;
}

/* ＝❌ 罠：inline-flexで余白がない＝ */
.is-fail-inline {
  display: inline-flex; /* 幅が縮む */
  justify-content: center; /* 効かない */
  border: 3px solid #dc3545; /* 赤枠 */
  padding: 10px;
  background-color: rgba(220, 53, 69, 0.1);
}

/* ＝⭕️ 正解：flexで余白がある＝ */
.is-success-block {
  display: flex; /* 横幅100%になる */
  justify-content: center; /* 中央に寄る */
  border: 3px solid #0d6efd; /* 青枠 */
  padding: 10px;
  background-color: rgba(13, 110, 253, 0.1);
  width: 100%; /* 親コンテナの幅を明示的に確保 */
  box-sizing: border-box;
}

/* ＝コード解説エリア＝ */
.justify-width-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

.hl-blue { color: #61afef; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }
.hl-comment { color: #6c757d; font-style: italic; }

幅や高さの設定について詳しく知りたい人は「【CSS】width（横幅）とheight（高さ）の指定とボックスモデル」を一読ください。

【html&css】width（横幅）とheight（高さ）の指定とボックスモデル

縦方向に配置したい場合の勘違い

「要素を上下の中央に配置したい」と考えた時、多くの初心者がjustify-contentの罠にはまります。

要素を縦方向（上下）にコントロールする際は、現在の「主軸（メイン軸）」がどちらを向いているかを確認することです。

  1. 横並び（row）の場合
    上下の配置はalign-itemsを使う（例：align-items: center;）。
  2. 縦並び（column）の場合
    主軸が縦に入れ替わるため、この時に初めて上下の配置にjustify-contentを使う。

「軸の入れ替わり」を理解すると、Flexboxの配置で迷うことはなくなります。

⭕️ 縦方向に動かしたいなら「align-items」を使うか、「軸」を変えろ！

❌ 罠（横並びでjustify使用）
横の真ん中にはなるが、縦の真ん中にはならない

BOX

⭕️ 正解1（align-items使用）
交差軸（縦）を中央に寄せる

BOX

⭕️ 正解2（columnに変更）
軸を縦に変えればjustifyで上下中央になる

BOX
/* ❌ 初心者のミス：縦に中央寄せしたいのに justify-content を使う */
.box-fail {
  display: flex;
  height: 150px;
  justify-content: center; /* 🚨 横が真ん中になるだけで、縦は上端のまま！ */
}

/* ⭕️ プロの鉄則1：横並びのまま上下を動かすなら align-items */
.box-success-1 {
  display: flex;
  height: 150px;
  align-items: center; /* 💡 これで縦方向の真ん中に来る */
}

/* ⭕️ プロの鉄則2：縦並び（column）にすれば、justify-content が「縦」に効く！ */
.box-success-2 {
  display: flex;
  flex-direction: column; /* 💡 主軸を「縦」に変更 */
  height: 150px;
  justify-content: center; /* 💡 主軸が縦になったので、これで上下中央になる */
}
HTMLコード表示
<div class="justify-axis-layout-wrapper">
  
  <p class="justify-axis-caption">⭕️ 縦方向に動かしたいなら「align-items」を使うか、「軸」を変えろ！</p>

  <div class="justify-axis-demo-area">
    
    <div class="justify-axis-item">
      <p class="justify-axis-label" style="color:#dc3545;">❌ 罠（横並びでjustify使用）<br><small>横の真ん中にはなるが、縦の真ん中にはならない</small></p>
      
      <div class="flex-axis-container is-fail-vertical">
        <div class="flex-axis-box">BOX</div>
      </div>
    </div>

    <div class="justify-axis-item">
      <p class="justify-axis-label" style="color:#0d6efd;">⭕️ 正解1（align-items使用）<br><small>交差軸（縦）を中央に寄せる</small></p>
      
      <div class="flex-axis-container is-success-align">
        <div class="flex-axis-box">BOX</div>
      </div>
    </div>

    <div class="justify-axis-item">
      <p class="justify-axis-label" style="color:#0d6efd;">⭕️ 正解2（columnに変更）<br><small>軸を縦に変えればjustifyで上下中央になる</small></p>
      
      <div class="flex-axis-container is-success-column">
        <div class="flex-axis-box">BOX</div>
      </div>
    </div>

  </div>

  <div class="justify-axis-code-area">
    <span class="hl-comment">/* ❌ 縦に中央寄せしたいのに justify-content を使う */</span><br>
    <span class="hl-blue">.box-fail</span> {<br>
      <span class="hl-green">display:</span> <span class="hl-red">flex;</span><br>
      <span class="hl-green">height:</span> <span class="hl-red">150px;</span><br>
      <span class="hl-green">justify-content:</span> <span class="hl-red">center;</span> <span class="hl-comment">/* 🚨 横が真ん中になるだけで、縦は上端のまま！ */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 横並びのまま上下を動かすなら align-items */</span><br>
    <span class="hl-blue">.box-success-1</span> {<br>
      <span class="hl-green">display:</span> <span class="hl-red">flex;</span><br>
      <span class="hl-green">height:</span> <span class="hl-red">150px;</span><br>
      <span class="hl-green">align-items:</span> <span class="hl-red">center;</span> <span class="hl-comment">/* 💡 これで縦方向の真ん中に来る */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 縦並び（column）にすれば、justify-content が「縦」に効く！ */</span><br>
    <span class="hl-blue">.box-success-2</span> {<br>
      <span class="hl-green">display:</span> <span class="hl-red">flex;</span><br>
      <span class="hl-green">flex-direction:</span> <span class="hl-red">column;</span> <span class="hl-comment">/* 💡 主軸を「縦」に変更 */</span><br>
      <span class="hl-green">height:</span> <span class="hl-red">150px;</span><br>
      <span class="hl-green">justify-content:</span> <span class="hl-red">center;</span> <span class="hl-comment">/* 💡 主軸が縦になったので、これで上下中央になる */</span><br>
    }
  </div>

</div>
CSSコード表示
.justify-axis-layout-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.justify-axis-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.justify-axis-demo-area {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  background-color: #e9ecef;
  padding: 40px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.justify-axis-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 200px;
}

.justify-axis-label {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 15px;
  line-height: 1.5;
}

/* 高さを持たせたデモ用コンテナ */
.flex-axis-container {
  width: 100%;
  height: 150px;
  background-color: #dee2e6;
  border: 2px solid #adb5bd;
  border-radius: 6px;
  display: flex;
}

/* 中のアイテム */
.flex-axis-box {
  background-color: #0dccea;
  color: white;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border-radius: 8px;
}

/* ＝❌ 罠：横並びでjustify-contentのみ（縦が中央にならない）＝ */
.is-fail-vertical {
  flex-direction: row; /* デフォルト */
  justify-content: center; /* 横方向の中央寄せ */
  /* align-itemsを指定していないので上端に張り付く */
}

/* ＝⭕️ 正解1：align-itemsを使う＝ */
.is-success-align {
  flex-direction: row; /* デフォルト */
  align-items: center; /* 💡 縦方向の中央寄せ */
}

/* ＝⭕️ 正解2：flex-direction: columnを使う＝ */
.is-success-column {
  flex-direction: column; /* 💡 主軸を「縦」に変更 */
  justify-content: center; /* 💡 主軸が縦になったので、これが上下中央寄せとして働く */
  align-items: center; /* 見栄えを良くするため横方向も中央に */
}

/* ＝コード解説エリア＝ */
.justify-axis-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

改めて、align-itemsの使い方を詳しく知りたい人は「【CSS】align-itemsの使い方：縦の中央揃えからjustify-contentとの違い」を一読ください。

【CSS】align-itemsの使い方：縦の中央揃えからjustify-contentとの違い

まとめ

分かりやすいようにまとめを記載します。

本記事のまとめ
  • justify-contentは、主にFlexboxにおける「主軸」に沿った要素の配置と余白の分配を決める。
  • プロパティの初期値（デフォルト）はflex-startである。
  • align-itemsは「交差軸」の配置を決めるプロパティであり、上下左右の中央寄せには両方の指定が必要である。
  • justify-itemsはGridで各セル内の配置を決めるものであり、Flexboxでは無効である。
  • 左寄せ・右寄せの指定にはleftやrightではなく、flex-startやflex-endを使用する。
  • 等間隔の配置にはspace-between、space-around、space-evenlyなどを使い分ける。
  • 複数行のリストレイアウトにおいてspace-betweenを使用すると、最終行の要素数が足りない場合にレイアウトが破綻するため、flex-startとgapの併用を推奨する。
  • justify-contentが効かない原因は、「親要素の幅不足（inline-flex等）」や「子要素の幅の食いつぶし」による余白の消失である。
  • 横並びのレイアウトで上下（縦方向）に要素を動かしたい場合はjustify-contentではなくalign-itemsを使用する。

よくある質問（FAQ）

justify-contentとalign-itemsの違いは何ですか？

Flexboxにおいて、アイテムを配置する「軸」が異なります。

justify-contentは主軸の配置と余白の分配を決めます。

一方、align-itemsは交差軸の配置を決めます。

上下左右の中央寄せを行いたい場合は、2つのプロパティを同時に指定する必要があります。

justify-contentを指定したのに全く効かないのはなぜですか？

最も多い原因は、親要素の中に分配するための「余白」が存在しないことです。

親要素にdisplay: inline-flex;が指定されていて親の幅が縮んでいたり、子要素にwidth: 100%;やflex-grow: 1;が指定されていて中身が幅を食いつぶしていると、動かすためのスペースがないためjustify-contentは無効になります。

親要素に幅を持たせ、余白を確保できているか確認してください。

space-betweenとspace-aroundの違いは何ですか？

要素間の「余白の入り方」が異なります。

  • space-between
    最初と最後の要素をコンテナの両端にくっつけ、残りの要素を等間隔に配置します。
  • space-around
    すべての要素の「両側」に均等な余白を作ります。
    そのため、両端の要素と壁との間には、要素同士の間の「半分」のサイズの余白ができます。
縦方向の中央寄せにjustify-contentは使えますか？

デフォルトの横並び（flex-direction: row;）の状態では、justify-contentで上下を動かすことはできず、align-itemsを使用します。

ただし、flex-direction: column;を指定して「縦並び」に変更した場合は主軸が縦に入れ替わるため、justify-content: center;が上下の中央寄せとして機能するようになります。

Flexboxで要素を右寄せにするにはどう書けばいいですか？

justify-content: flex-end;を指定します。

直感的にrightやtext-align: right;を指定してしまいがちですが、Flexboxの仕様では主軸の「開始（start）」と「終了（end）」を基準にするため、標準的なレイアウトではflex-startとflex-endを使用するのが正しい書き方です。

CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次