CSSのjustify-contentの使い方：指定値・実例・効かない原因とブラウザー互換性

justify-content は、主軸方向の余白の配分です。この記事では、space-between と center を比較して、表示の違いと指定が効く条件を確認します。

justify-contentでできること

活用する場面

余白を項目の間へ配るか、項目を中央に寄せるかが変わります。 配分できる余白がなければ変化は見えません。Flexboxではflex-growやautoマージンが先に余白を使う場合があります。

justify-contentの書き方と主な値

宣言の基本

.demo {
  justify-content: space-between;
}

.demo はHTMLの class="demo" を持つ要素を選びます。プロパティ名の後ろにコロン、値の最後にセミコロンを書きます。

指定できる値の読み方

start、end、center、space-between、space-around、space-evenlyなど。主軸方向などの余白を配分します。

初期値と継承

• 初期値：normal。
• 通常の継承：しない。

仕様上の初期値と、ブラウザーの既定スタイルで見えている値は同じとは限りません。たとえば要素に既定のスタイルや別のクラスが適用されていれば、開発者ツールに表示される結果が優先されます。

inherit は親の計算値を使い、initial は仕様の初期値に戻します。unset は継承する項目ならinherit、それ以外ならinitialとして扱います。revert や revert-layer はカスケードの由来やレイヤーを巻き戻す値で、単に直前の行へ戻る指定ではありません。

活用例：justify-contentの変化をブラウザーで比べる

HTMLを用意する

index.html の head に <link rel="stylesheet" href="./styles.css"> を置き、次のHTMLを body 内へ追加します。親と子の構造も例の一部です。

<div class="stage"><div class="demo"><div class="item">短い</div><div class="item">少し長い<br>文章</div><div class="item">項目</div></div></div>

styles.cssに書くCSS

最後の「今回変更するプロパティ」の行が比較対象です。その前の指定は、違いが見えるようにする土台です。同じ .demo が複数回登場する場合は、通常は後の同じ詳細度の宣言が優先されます。

* { box-sizing: border-box; }
.stage { max-width: 30rem; padding: 1rem; border: 1px dashed #a8baa9; background: #f6f8f1; }
.demo { padding: 1rem; border: 3px solid #285c40; background: #e6f2ce; color: #233a32; }
.item { padding: 0.75rem; border: 1px solid #66836c; background: #fff; }
.demo { display: flex; gap: 0.5rem; min-height: 10rem; }
.item { flex: 0 0 3rem; }

/* 今回変更するプロパティ */
.demo { justify-content: space-between; }

別の値へ変更して比較する

最後の justify-content の値だけを次のように置き換えます。

.demo { justify-content: center; }

余白を項目の間へ配るか、項目を中央に寄せるかが変わります。変更後はファイルを保存してブラウザーを再読み込みします。

値を切り替えられるサンプルを開く

justify-contentが効かないときの確認

このプロパティで間違えやすい点

配分できる余白がなければ変化は見えません。Flexboxではflex-growやautoマージンが先に余白を使う場合があります。

Flexboxの親を変更する指定か、子のflexアイテムを変更する指定かを確認します。親に display: flex が必要な例と、子へ設定する例を混同しないでください。

開発者ツールで順番に調べる

• Networkで styles.css が正常に取得されているかを確認する。
• Elementsで対象の class とCSSのセレクターが一致しているかを確認する。
• Stylesで宣言が無効扱いになっていないか、別の宣言に上書きされていないかを見る。
• Computedで最終的な値を確認し、親の表示方式や寸法も調べる。
• 320px程度の画面幅、文字の拡大、キーボード操作でも内容を利用できるか確認する。

justify-contentのブラウザー互換性

プロパティ本体の対応

2026年9月21日確認のMDN Browser Compatibility Dataの記録です。開始版は通常の接頭辞なしの実装を優先しています。プロパティが使えることと、すべての値・構文が使えることは別です。

• Chrome：29以降
• Edge：12以降
• Firefox：20以降
• Safari：9以降
• Android版Chrome：29以降
• iOS版Safari：9以降

「部分対応」「補足条件あり」の場合は下の出典の注記も確認します。開発版・予定版の記録は、その機能が現在の安定版で使えるという意味ではありません。

値・利用場面による追加の対応差

• flex_context：Chrome 52以降 ／ Edge 12以降 ／ Firefox 20以降・補足条件あり ／ Safari 7以降。
• grid_context：Chrome 57以降 ／ Edge 16以降 ／ Firefox 52以降 ／ Safari 10.1以降。

これらは互換性データ上の機能名です。対応する値・文脈の詳細や、ここに挙げていない新しい機能はMDNの個別ページを参照してください。

練習と関連プロパティ

値を1つずつ変えて理解する

まず space-between と center の違いを言葉で説明します。次に文章量や親の幅だけを変え、結果がどう変わるかを比較してください。複数のプロパティを一度に書き換えるより、原因と結果を追いやすくなります。

関連する記事

• flex-wrap の使い方
• align-items の使い方
• flex-direction の使い方
• align-content の使い方
• clear の使い方
• CSSプロパティ一覧
• CSSセレクターと条件指定
• HTML・CSSの学習順

参考資料

• MDN：justify-content
• CSS仕様の定義
• 互換性データの出典
• 初期値・継承情報の出典

互換性はMDN Browser Compatibility Data 8.1.2、初期値と継承はmdn-data 2.36.0（いずれもCC0-1.0）を参照しています。ブラウザー更新時には対象の値まで含めて再確認してください。