主軸配置プロパティ

最終更新：2026-09-13

justify-content 主軸配置プロパティ

justify-content プロパティは、flex アイテムが主軸に沿ってどう配置されるか、およびアイテム間やアイテムとコンテナー端との間の空間がどう分配されるかを設定します。これは flexbox で最もよく使われる配置プロパティであり、left・right・center・space-between・space-around・space-evenly などの配置をサポートします。主軸は flex-direction によって決まります。

カテゴリ
初期値	normal
継承	いいえ
適用対象	すべての要素
アニメーションタイプ	discrete
CSS バージョン	CSS3
状態	標準

📝 構文

justify-content: normal | start | end | flex-start | flex-end | center | left | right | space-between | space-around | space-evenly | stretch;

⚙️ 値

値	タイプ	説明
`normal \| flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly`	キーワード	主軸の配置。

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
justify-content	✓ v29	✓ v12	✓ v28	✓ v9	✓ v17
すべての主要ブラウザーでサポート

ヒント： space-between は最初と最後のアイテムを端にぴったり寄せ、中間のアイテムを均等に配置します。space-around は各アイテムの両側に等しい空間を与えるため、端の隙間は中間の隙間の半分になります。space-evenly はすべての隙間を完全に等しくします。

重要： justify-content は主軸に作用します。flex-direction が column の場合は垂直方向の配置を制御し、効果を見るにはコンテナーに明確な高さが必要です。

❓ よくある質問

Qspace-between・space-around・space-evenly の違いは？

Aspace-between は最初と最後のアイテムを端にぴったり寄せ、中間を均等に配置します。space-around は各アイテムの左右に等しい空間を与えるため、端の隙間はアイテム間の隙間の半分になります。space-evenly は端を含むすべての隙間を完全に等しくします。端をぴったり付けたいときは space-between を、もっとも均一に分布させたいときは space-evenly を選んでください。

Qjustify-content と text-align: center の違いは？

Atext-align: center はブロックコンテナー内のテキストやインライン要素などのインライン内容を整列させます。これはテキスト層で働きます。一方 justify-content: center は flex アイテムを主軸に沿って配置し、レイアウト層で働き、space-between のような分布モードもサポートします。両者は共存もできます。flex コンテナーは justify-content でアイテムを中央揃えしつつ、各アイテム内のテキストは text-align で整列させられます。レイアウトには justify-content を、テキストには text-align を使ってください。

Qjustify-content: center が効かないのはなぜですか？

A最も多い原因は、コンテナーに余白がないことです。アイテムの合計幅がコンテナーの幅と等しいかそれを超えると、主軸上に分配する空きスペースがなく、中央揃えが作用する対象がありません。また flex-direction: column の場合は、コンテナーに明示的な高さが必要です。そうでなければ内容が垂直方向を埋め尽くし、空間が残りません。主軸とコンテナーのサイズを確認して原因を突き止めてください。