CSS justify-content 属性详解：フレックスボックス要素の整列をマスター

CSS プロパティ justify-content

このページでは、CSS の `justify-content` プロパティについて詳しく解説します。定義、構文、プロパティ値（`flex-start`、`flex-end`、`center`、`space-between`、`space-around`、`space-evenly`）を網羅し、フレックスボックスモデルでどのようにアイテムを主軸に沿って柔軟に整列させるかを、コード例を交えてわかりやすく説明します。

1. justify-content 属性とは？

`justify-content` プロパティは、フレックスコンテナ内のアイテムを主軸に沿ってどのように配置するかを指定します。

**定義:** `justify-content` プロパティは、アイテムを主軸に沿ってどのように整列させるかを定義します。
**適用範囲:** `display` プロパティの値が `flex` または `inline-flex` であるフレックスコンテナにのみ適用されます。

2. justify-content プロパティ値の詳細

`justify-content` プロパティには、以下の値を設定できます。

**`flex-start` (デフォルト値):** アイテムを主軸の始点に揃えます。


<div class="container">
  <div>アイテム1</div>
  <div>アイテム2</div>
  <div>アイテム3</div>
</div>


.container {
  display: flex;
  justify-content: flex-start;
}

**`flex-end`:** アイテムを主軸の終点に揃えます。


<div class="container">
  <div>アイテム1</div>
  <div>アイテム2</div>
  <div>アイテム3</div>
</div>


.container {
  display: flex;
  justify-content: flex-end;
}

**`center`:** アイテムを主軸の中央に揃えます。


<div class="container">
  <div>アイテム1</div>
  <div>アイテム2</div>
  <div>アイテム3</div>
</div>


.container {
  display: flex;
  justify-content: center;
}

**`space-between`:** アイテムを両端に揃え、アイテム間のスペースを均等にします。


<div class="container">
  <div>アイテム1</div>
  <div>アイテム2</div>
  <div>アイテム3</div>
</div>


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

**`space-around`:** 各アイテムの両側のスペースを均等にします。そのため、アイテム間のスペースは、アイテムと境界線の間のスペースの2倍になります。
```
<div class="container">
  <div>アイテム1</div>
  <div>アイテム2</div>
  <div>アイテム3</div>
</div>
    
```
```
.container {
  display: flex;
  justify-content: space-around;
}
    
```

**`space-evenly`:** アイテムとアイテムの間のスペース、およびアイテムと境界線の間のスペースを均等にします。


<div class="container">
  <div>アイテム1</div>
  <div>アイテム2</div>
  <div>アイテム3</div>
</div>


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

3. justify-content と flex-direction の関係

`justify-content` プロパティは主軸に沿ったアイテムの配置を制御しますが、主軸の方向は `flex-direction` プロパティによって決まります。

**`flex-direction: row;` の場合:** 主軸は水平方向になり、`justify-content` はアイテムを左右に配置します。
**`flex-direction: column;` の場合:** 主軸は垂直方向になり、`justify-content` はアイテムを上下に配置します。


<div class="container row">
  <div>アイテム1</div>
  <div>アイテム2</div>
  <div>アイテム3</div>
</div>

<div class="container column">
  <div>アイテム1</div>
  <div>アイテム2</div>
  <div>アイテム3</div>
</div>


.container {
  display: flex;
  margin-bottom: 20px;
}

.row {
  flex-direction: row;
  justify-content: space-between; /* 例としてspace-betweenを適用 */
}

.column {
  flex-direction: column;
  justify-content: space-between; /* 例としてspace-betweenを適用 */
}

4. ブラウザの対応状況

`justify-content` プロパティは、主要なブラウザで広くサポートされています。

ブラウザ	バージョン
Chrome	29+
Firefox	20+
Safari	9+
Edge	12+
IE	11+ (部分的にサポート)

より詳細なブラウザの対応状況については、Can I use を参照してください。

5. まとめ

`justify-content` プロパティは、フレックスボックスレイアウトにおいて、アイテムを主軸に沿って柔軟に整列させるために非常に便利なプロパティです。さまざまな値を組み合わせることで、多様なレイアウトを実現できます。ぜひ、このプロパティを活用して、より美しく、ユーザーフレンドリーなWebページを作成してください。

CSS justify-content 属性详解：フレックスボックス要素の整列をマスター

1. justify-content 属性とは？

2. justify-content プロパティ値の詳細

3. justify-content と flex-direction の関係

4. ブラウザの対応状況

5. まとめ

関連QA