justify-content

レイアウト・配置

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

構文

Syntax
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
🎮

インタラクティブデモ

コントロール

プレビュー

1
2
3

生成されたCSS

.element { justify-content: flex-start; }

コード例

例 1

justify-content: center;
実行結果
1
2
3

アイテムを中央に配置

例 2

justify-content: space-between;
実行結果
1
2
3

アイテム間に均等な間隔を配置

例 3

justify-content: flex-start;
実行結果
1
2
3
justify-content: flex-start（左寄せ）

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

例 4

justify-content: space-around;
実行結果
1
2
3
justify-content: space-around（両端と間に均等な余白）

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

💡 TIPS

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

関連プロパティ

ブラウザサポート

IE11+, 全モダンブラウザ