CSS justify-content プロパティ

JPKODA 編集部 May 6, 2026

justify-content プロパティは、フレックスアイテムがフレックスコンテナの主軸 (main axis) 上でどのように整列するかを決定します。

本質的に、フレックスアイテムが主軸上のすべての利用可能なスペースを占有していない場合、このプロパティがその「余白（残りスペース）」の分配をコントロールする役割を担います。

具体的な詳細に入る前に、主軸は flex-direction プロパティによって決まることを思い出してください。
デフォルトでは、flex-direction は row に設定されており、主軸は水平方向になります。
もし flex-direction が column に設定されると、主軸は垂直方向になります。

justify-content プロパティの具体的な挙動は、この主軸の方向に基づいて変化します。

1. justify-content の属性値を理解する

justify-content プロパティはいくつかの異なる値を受け入れます。それぞれの値は、主軸上でフレックスアイテムを整列させ、スペースを分配するためのユニークな方法を提供します。

それぞれ詳しく見ていきましょう。

1.1 flex-start

説明： これはデフォルト値です。フレックスアイテムを主軸の起点（スタート地点）に整列させます。
挙動： アイテムはコンテナの開始位置に押し寄せられます。余剰スペースはすべて末尾に配置されます。
例：水平方向のフレックスコンテナ（flex-direction: row）を想定してください。justify-content: flex-start を使用すると、すべてのアイテムは左揃えになります。コンテナが垂直方向（flex-direction: column）の場合、アイテムは上揃えになります。

.container {
  display: flex;
  justify-content: flex-start; /* デフォルト値 */
  flex-direction: row; /* または column */
}

1.2 flex-end

説明： フレックスアイテムを主軸の終点（エンド地点）に整列させます。
挙動： アイテムはコンテナの末尾位置に押し寄せられます。余剰スペースは開始位置に配置されます。
例：水平方向のコンテナで justify-content: flex-end を設定すると、アイテムは右揃えになります。垂直方向のコンテナでは、下揃えになります。

.container {
  display: flex;
  justify-content: flex-end;
  flex-direction: row; /* または column */
}

1.3 center

説明： フレックスアイテムを主軸上の中央に整列させます。
挙動： アイテムはコンテナの中央に密着して配置されます。等量の余剰スペースが起点と終点の両側に配置されます。
例：水平方向のコンテナではアイテムが水平中央に、垂直方向のコンテナでは垂直中央に配置されます。

.container {
  display: flex;
  justify-content: center;
  flex-direction: row; /* または column */
}

1.4 space-between

説明： 主軸に沿ってフレックスアイテムを均等に分布させます。最初のアイテムは起点に、最後のアイテムは終点に配置されます。
挙動： 残りのスペースはアイテム間に平等に分配されます。つまり、最初のアイテムの前や最後のアイテムの後ろには余白がありません。
例：水平方向のコンテナに3つのアイテムがある場合、1つ目は左端、3つ目は右端に配置され、2つ目はそのちょうど中間に配置されます。

.container {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

1.5 space-around

説明： 主軸に沿ってフレックスアイテムを均等に分布させ、各アイテムの周囲に等しいスペースを持たせます。
挙動： 各アイテムの両側のスペース量が同じになります。そのため、コンテナの起点と終点にあるスペースは、アイテム間のスペースの半分のサイズになります。
例： 3つのアイテムがある場合、各アイテムの左右に等しいスペースがつきます。結果として、コンテナ端の余白はアイテム同士の間の隙間よりも狭くなります。

.container {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
}

1.6 space-evenly

説明： 主軸に沿ってフレックスアイテムを均等に分布させ、各アイテムの周囲のスペースを完全に等しくします。これには起点と終点のスペースも含まれます。
挙動： 最初のアイテムの前、アイテム間、そして最後のアイテムの後のすべてのスペースが等しくなります。
例：水平方向のコンテナに3つのアイテムがある時、すべての隙間（両端と中間すべて）が全く同じ幅になります。

.container {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
}

2. デモと実戦ケース

シンプルなHTML構造を使用して、これらの justify-content の値を実戦形式で確認してみましょう。

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

ベースCSS（アイテムのスタイリング）：

.container {
  display: flex;
  width: 500px;
  height: 200px;
  background-color: #eee;
  border: 1px solid #ccc;
}

.item {
  width: 80px;
  height: 80px;
  background-color: #3498db;
  color: white;
  text-align: center;
  line-height: 80px;
  margin: 5px;
}

ここで、.container クラスに異なる justify-content の値を適用して、アイテムの整列がどう変わるかを確認してください。HTMLファイルを作成し、.container のCSSルール内の justify-content プロパティを書き換えて、以下の挙動を観察してみましょう。

justify-content: flex-start: アイテムがコンテナの左端に寄ります。
justify-content: flex-end: アイテムがコンテナの右端に寄ります。
justify-content: center: アイテムがコンテナ内で水平中央に寄ります。
justify-content: space-between: 最初のアイテムが左端、最後のアイテムが右端に行き、中間のアイテムが均等に配置されます。
justify-content: space-around: 各アイテムの周囲に等しいスペースが配置されますが、端のスペースは中間の半分になります。
justify-content: space-evenly: アイテムの前、間、後ろのすべてのスペースが完全に均等になります。

flex-direction の影響を確認するには、.container のCSSに flex-direction: column; を追加してみてください。その際、コンテナの height が全アイテムの合計高さより大きいことを確認してください。すると、justify-content プロパティが垂直方向にアイテムを整列させる様子がわかります。