CSS辞書

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

Tailwindでは

justify-startjustify-content: flex-start
justify-centerjustify-content: center
justify-betweenjustify-content: space-between
justify-endjustify-content: flex-end

safe対応はjustify-center-safe（v4.1+）。

インタラクティブデモ

Try it

コントロール

プレビュー

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はナビゲーションメニューに最適。

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

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

💬 AIへの頼み方

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

そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。

関連プロパティ

このプロパティを使ったUIレシピ

プロフィールカード（カード）子要素の高さを揃えてコンテンツを上下中央（レイアウトパターン）

ブラウザサポート

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