CSSjustify-content プロパティは、フレックスコンテナーの主軸およびグリッドコンテナーのインライン軸に沿って、中身のアイテムの間や周囲に間隔を配置する方法を定義します。

このデモはグリッドレイアウトを用いていくつかの値を紹介します。

長さや自動マージンが適用された後に配置が行われることから、フレックスボックスレイアウトflex-grow0 ではないフレックス要素が少なくとも 1 つある場合は利用可能なスペースがなくなりますので、このプロパティの効果はないでしょう。

構文

/* 位置による配置 */
justify-content: center;     /* アイテムを中央に寄せる */
justify-content: start;      /* アイテムを先頭に寄せる */
justify-content: end;        /* アイテムを末尾に寄せる */
justify-content: flex-start; /* フレックスアイテムを先頭に寄せる */
justify-content: flex-end;   /* フレックスアイテムを末尾に寄せる */
justify-content: left;       /* アイテムを左端に寄せる */
justify-content: right;      /* アイテムを右端に寄せる */

/* ベースラインによる配置 */
/* justify-content はベースラインの値を取りません */

/* 通常の配置 */
align-content: normal;

/* 均等配置 */
justify-content: space-between; /* 各アイテムを均等に配置し
                                   最初のアイテムは先頭に寄せ、
                                   最後のアイテムは末尾に寄せる */
justify-content: space-around;  /* 各アイテムを均等に配置し
                                   各アイテムの両側に半分の大きさの
                                   間隔を置く */
justify-content: space-evenly;  /* 各アイテムを均等に配置し
                                   各アイテムの周りに同じ大きさの間隔を置 */
justify-content: stretch;       /* 各アイテムを均等に配置し
                                   サイズが 'auto' であるアイテムは、
                                   コンテナーに合わせて引き伸ばす */

/* あふれた場合の配置 */
justify-content: safe center;
justify-content: unsafe center;

/* グローバル値 */
justify-content: inherit;
justify-content: initial;
justify-content: unset;

start
各アイテムは、主軸方向で配置コンテナーの先頭側の端に向けて互いに寄せて配置されます。
end
各アイテムは、主軸方向で配置コンテナーの末尾側の端に向けて互いに寄せて配置されます。
flex-start
各アイテムは、フレックスコンテナーに依存して、主軸の先頭側である配置コンテナーの端に向けて互いに寄せて配置されます。
これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は start のように扱われます。
flex-end
各アイテムは、フレックスコンテナーに依存して、主軸の末尾側である配置コンテナーの端に向けて互いに寄せて配置されます。
これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は end のように扱われます。
center
各アイテムは、主軸方向で配置コンテナーの中央に向けて互いに寄せて配置されます。
left
各アイテムは、主軸方向で配置コンテナーの左側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は start のように動作します。
right
各アイテムは、主軸方向で配置コンテナーの右側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は start のように動作します。
normal
各アイテムは justify-content の値が設定されていないかのように、既定の位置に寄せて配置されます。この値はグリッドおよびフレックスコンテナーの stretch として動作します。
baseline
first baseline

last baseline
first-baseline 配置または last-baseline 配置への関与を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。
first baseline の代替配置は startlast baseline の代替配置は end です。
space-between
各アイテムは、配置コンテナーの中で主軸方向に均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムは主軸の先頭側に寄せられ、最後のアイテムは主軸の末尾側に寄せられます。
space-around
各アイテムは、配置コンテナーの中で主軸方向に均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムの前と最後のアイテムの後の余白は、隣接するアイテム同士の間隔の半分の幅になります。
space-evenly
各アイテムは、配置コンテナーの中で主軸方向に均等に配置されます。隣接するアイテム同士の間隔、最初のアイテムの前の余白、最後のアイテムの後の余白は、まったく同じ幅になります。
stretch
各アイテムの寸法の合計が配置コンテナーの寸法よりも小さい場合、寸法が auto のアイテムは、 max-height/max-width (または同等の機能) での制約を尊重しつつ、 (比例的にではなく) 均等に引き伸ばされ、主軸方向の寸法の合計が配置コンテナーを満たすようになります。
safe
配置キーワードと共に使用します。選択されたキーワードによって、アイテムが配置コンテナーをあふれてデータの損失が発生する場合、アイテムは配置モードが start であったかのように配置されます。
unsafe
配置キーワードと共に使用します。アイテムの配置コンテナーのサイズの関係、あふれることによってデータの損失が発生するかどうかにかかわらず、指定した値を尊重します。

形式文法

normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]

where
<content-distribution> = space-between | space-around | space-evenly | stretch
<overflow-position> = unsafe | safe
<content-position> = center | start | end | flex-start | flex-end

CSS コンテンツ

#container {
  display: flex;
  justify-content: space-between; /* live sample で変更可能 */
}

#container > div {
  width: 100px;
  height: 100px;
  background: linear-gradient(-45deg, #788cff, #b4c8ff);
}

結果

仕様書

仕様書 状態 備考
CSS Box Alignment Module Level 3
justify-content の定義
草案 [ first | last ]? baseline, self-start, self-end, start, end, left, right, unsafe | safe の値を追加
CSS Flexible Box Layout Module
justify-content の定義
勧告候補 初回定義
初期値normal
適用対象flex containers
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

フレックスレイアウトでの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 52
完全対応 52
部分対応 29
補足
補足 Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
完全対応 21
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12
完全対応 12
完全対応 12
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox 完全対応 20
補足
完全対応 20
補足
補足 Before Firefox 27, Firefox supported only single-line flexbox.
未対応 18 — ?
無効
無効 From version 18: this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 48
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11Opera 完全対応 12.1Safari 完全対応 9WebView Android 完全対応 52
完全対応 52
部分対応 4.4
補足
補足 Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 52
完全対応 52
部分対応 29
補足
補足 Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
完全対応 25
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge Mobile 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android ? Opera Android 完全対応 12.1Safari iOS ? Samsung Internet Android 完全対応 あり
space-evenlyChrome 完全対応 60Edge 未対応 なしFirefox 完全対応 52IE 未対応 なしOpera 完全対応 47Safari 完全対応 11WebView Android 完全対応 60Chrome Android 完全対応 60Edge Mobile 未対応 なしFirefox Android 完全対応 52Opera Android 完全対応 47Safari iOS 完全対応 11Samsung Internet Android 未対応 なし
start and endChrome 部分対応 一部
補足
部分対応 一部
補足
補足 This value is recognized, but has no effect.
Edge 未対応 なしFirefox 完全対応 ありIE 未対応 なしOpera 部分対応 一部
補足
部分対応 一部
補足
補足 This value is recognized, but has no effect.
Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
left and rightChrome 部分対応 一部
補足
部分対応 一部
補足
補足 This value is recognized, but has no effect.
Edge 未対応 なしFirefox 完全対応 52
完全対応 52
未対応 ? — 52
補足
補足 This value is recognized, but has no effect.
IE 部分対応 一部
補足
部分対応 一部
補足
補足 This value is recognized, but has no effect.
Opera 部分対応 一部
補足
部分対応 一部
補足
補足 This value is recognized, but has no effect.
Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 完全対応 52
完全対応 52
未対応 ? — 52
補足
補足 This value is recognized, but has no effect.
Opera Android ? Safari iOS ? Samsung Internet Android ?
baselineChrome 完全対応 57Edge 未対応 なしFirefox 未対応 ? — 60
補足
未対応 ? — 60
補足
補足 justify-content no longer accepts baseline values
IE 未対応 なしOpera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile 未対応 なしFirefox Android 未対応 ? — 60
補足
未対応 ? — 60
補足
補足 justify-content no longer accepts baseline values
Opera Android ? Safari iOS ? Samsung Internet Android ?
first baseline and last baselineChrome 未対応 なしEdge 未対応 なしFirefox 未対応 52 — 60
補足
未対応 52 — 60
補足
補足 justify-content no longer accepts baseline values
IE 未対応 なしOpera 未対応 なしSafari ? WebView Android ? Chrome Android ? Edge Mobile 未対応 なしFirefox Android 未対応 52 — 60
補足
未対応 52 — 60
補足
補足 justify-content no longer accepts baseline values
Opera Android ? Safari iOS ? Samsung Internet Android 未対応 なし
stretchChrome 完全対応 57Edge 未対応 なしFirefox 完全対応 52IE 未対応 なしOpera 完全対応 44Safari ? WebView Android ? Chrome Android ? Edge Mobile 未対応 なしFirefox Android 完全対応 52Opera Android ? Safari iOS ? Samsung Internet Android ?
safe and unsafeChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 63IE 未対応 なしOpera 未対応 なしSafari ? WebView Android ? Chrome Android ? Edge Mobile 未対応 なしFirefox Android 完全対応 63Opera Android ? Safari iOS ? Samsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
部分対応  
部分対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

グリッドレイアウトでの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 57Edge 完全対応 16Firefox 完全対応 52IE 未対応 なしOpera 完全対応 44Safari 完全対応 10.1WebView Android 完全対応 57Chrome Android 完全対応 52Edge Mobile 完全対応 ありFirefox Android 完全対応 52Opera Android 完全対応 44Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 6.2

凡例

完全対応  
完全対応
未対応  
未対応

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss, myakura, fscholz, teoli, ethertank
最終更新者: mfuji09,