# justify-content

> フレックスコンテナ内のアイテムの主軸方向の配置を指定するプロパティです。flex-start、flex-end、center、space-between、space-aroundなどがあり、アイテム間の余白配分を制御します。

- カテゴリ: レイアウト・配置
- URL: https://www.css-dictionary.com/property/justify-content/

## 構文

```css
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
```

## Tailwindでは

- `justify-start` → justify-content: flex-start
- `justify-center` → justify-content: center
- `justify-between` → justify-content: space-between
- `justify-end` → justify-content: flex-end
- 補足: safe対応はjustify-center-safe（v4.1+）。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 29+ / Firefox 20+ / Safari 9+ / Edge 12+

## コード例

### 例1: アイテムを中央に配置

```css
justify-content: center;
```

### 例2: アイテム間に均等な間隔を配置

```css
justify-content: space-between;
```

### 例3: アイテムを左（開始位置）に寄せて配置

```css
justify-content: flex-start;
```

### 例4: アイテムの両端と間に均等な余白を配置

```css
justify-content: space-around;
```

## TIPS

centerはボタンやカードの中央配置によく使う。space-betweenはナビゲーションメニューに最適。

## AIがよく間違えるポイント

space-betweenは最終行で要素がまばらに広がる問題があり、AIは一覧グリッドに安易にspace-betweenを使いがちです（gap+flex-start、またはgridが正解のことが多い）。またjustify-contentは主軸方向にしか効かない点の混同も定番です。

## AIへの依頼文例

- カード一覧のspace-betweenで最終行が不自然に広がる問題を、gapベースの実装に直して

## 関連プロパティ

- [align-items](https://www.css-dictionary.com/property/align-items.md)
- [flex-direction](https://www.css-dictionary.com/property/flex-direction.md)
- [display](https://www.css-dictionary.com/property/display.md)