CSSjustify-content プロパティは、コンテナーの main axis に沿ってスペースをコンテンツアイテムの間や周囲へどのように分配するかを定義します。

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

構文

/* Positional alignment */
justify-content: center;     /* アイテムを中央に集める */
justify-content: start;      /* アイテムを始端に集める */
justify-content: end;        /* アイテムを終端に集める */
justify-content: flex-start; /* flex アイテムを始端に集める */
justify-content: flex-end;   /* flex アイテムを終端に集める */
justify-content: left;       /* アイテムを左端に集める */
justify-content: right;      /* アイテムを右端に集める */

/* Baseline alignment */
/* justify-content はベースラインの値をとりません */

/* Normal alignment */
align-content: normal;

/* Distributed alignment */
justify-content: space-between; /* アイテムを均等に分散する。
                                   最初のアイテムは始端に接する。
                                   最後のアイテムは終端に接する。 */
justify-content: space-around;  /* アイテムを均等に分散する。
                                   アイテムは、両側に半分のサイズの
                                   スペースを持つ。 */
justify-content: space-evenly;  /* アイテムを均等に分散する。
                                   各アイテムの周囲に均等なスペースを置く */
justify-content: stretch;       /* アイテムを均等に分散する。
                                   サイズが 'auto' であるアイテムは、
                                   コンテナーに合わせて引き伸ばす。 */

/* Overflow alignment */
justify-content: safe center;
justify-content: unsafe center;

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

start
アイテムは main axis の配置コンテナーの始端に向かって、互いに接するように詰められます。
end
アイテムは main axis の配置コンテナーの終端に向かって、互いに接するように詰められます。
flex-start
アイテムは flex コンテナーの main-start 側で、互いに接するように配置コンテナーの端に詰められます。
これは flex レイアウトのアイテムのみに適用します。flex コンテナーの子ではないアイテムでは、この値は start であるように扱います。
flex-end
アイテムは flex コンテナーの main-end 側で、互いに接するように配置コンテナーの端に詰められます。
これは flex レイアウトのアイテムのみに適用します。flex コンテナーの子ではないアイテムでは、この値は end であるように扱います。
center
アイテムは main axis に沿って配置コンテナーの中央で、互いに接するように詰められます。
left
アイテムは配置コンテナーの左端に向かって、互いに接するように詰められます。プロパティの軸が inline axis に平行ではない場合は、この値は start のように動作します。
right
アイテムは配置コンテナーの右端に向かって、互いに接するように詰められます。プロパティの軸が inline axis に平行ではない場合は、この値は start のように動作します。
normal
justify-content の値が設定されていないかのように、アイテムを既定の位置に詰めて配置します。
baseline
first baseline

last baseline
first-baseline 配置または last-baseline 配置への関与を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。
first baseline の代替配置は startlast baseline の代替配置は end です。
space-between
アイテムは main axis に沿って配置コンテナーで、均等に配置されます。隣接するアイテムの間のスペースは同じサイズです。最初のアイテムは main-start の端に、最後のアイテムは main-end の端に寄せられます。
space-around
アイテムは main axis に沿って配置コンテナーで、均等に配置されます。隣接するアイテムの間のスペースは同じサイズです。最初のアイテムの前および最後のアイテムの後ろに置かれる余白のサイズは、隣接するアイテム間の余白の半分に等しくなります。
space-evenly
アイテムは main axis に沿って配置コンテナーで、均等に配置されます。隣接するアイテムの間のスペース、main-start の端と最初のアイテムの間のスペース、main-end の端と最後のアイテムの間のスペースはすべて同じサイズです。
stretch
アイテムの合計サイズが配置コンテナーのサイズより小さい場合に、サイズが auto であるすべてのアイテムは (比例的にではなく) 均等に引き伸ばされます。ただし、max-height/max-width (あるいは同等の機能) による制限は尊重します。これにより、合計サイズは main axis に沿って配置コンテナーを完全に埋めるようになります。
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
継承不可
メディアvisual
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

52

291

21 -webkit-

12

12 -webkit-

202

18 —?3

49 -webkit-

48 -webkit- 4

1112.19
space-evenly60 なし52 なし なし なし
start and end あり5 なし あり なし あり5 ?
left and right あり5 なし

52

あり5

あり5 あり5 ?
baseline57 なし あり — 606 なし ? ?
first baseline and last baseline なし なし52 — 606 なし なし ?
stretch57 なし52 なし44 ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応

52

291

21 -webkit-

52

291

21 -webkit-

あり

あり -webkit-

?12.1 ? あり
space-evenly なし なし なし52 なし なし なし
start and end ? ? ? ? ? ? ?
left and right ? ? ?

52

あり5

? ? ?
baseline ? ? なし あり — 606 ? ? ?
first baseline and last baseline ? ? なし52 — 606 ? ? なし
stretch ? ? なし52 ? ? ?

1. 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.

2. Before Firefox 27, Firefox supported only single-line flexbox.

3. 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.

4. 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.

5. This value is recognized, but has no effect.

6. justify-content no longer accepts baseline values

関連情報

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

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