justify-content

概要

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

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

初期値flex-start
適用対象flex containers
継承不可
メディアvisual
計算値指定値
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序

構文

/* 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: baseline;
justify-content: first baseline;
justify-content: last baseline;

/* 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 のように動作します。
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
アイテムの配置コンテナーのサイズの関係にかかわらず、指定した値を尊重します。

形式的構文

flex-start | flex-end | center | space-between | space-around | space-evenly

CSS コンテンツ

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

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

表示結果

仕様

仕様書 策定状況 コメント
CSS Flexible Box Layout Module
justify-content の定義
勧告候補 最初期の定義
CSS Box Alignment Module
justify-content の定義
草案 space-evenly, [ first | last ]?baseline, start, end, left, and right の値を追加。

ブラウザー実装状況

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 21.0 -webkit
29.0[3]
(有)-webkit
(有)
18.0 (18.0)[1]
20.0 (20.0)[2]
11 12.10 9
space-evenly 未サポート 未サポート 52.0 (52.0) 未サポート ? ?
start, end 未サポート[4] 未サポート (有) 未サポート 未サポート[4] ?
left, right 未サポート[4] 未サポート 52.0 (52.0)[5] 未サポート 未サポート[4] ?
baseline 57.0 未サポート (有) 未サポート 44.0 ?
first baseline, last baseline 未サポート 未サポート 52.0 (52.0) 未サポート 未サポート ?
stretch 57.0 未サポート 52.0 (52.0) 未サポート 44.0 ?
機能 Firefox Mobile (Gecko) Android Android Webview Edge IE Phone Opera Mobile Safari Mobile Chrome for Android
基本サポート ? ? (有)[3] (有)-webkit
(有)
未サポート 12.10 ? (有)[3]
space-evenly 52.0 (52.0) 未サポート 未サポート 未サポート 未サポート 未サポート 未サポート 未サポート
start, end 未サポート[4] 未サポート (有) 未サポート 未サポート[4] ?
left, right 未サポート[4] 未サポート 52.0 (52.0)[5] 未サポート ?[4] ?
baseline 57.0 未サポート (有) 未サポート 44.0 ?
first baseline, last baseline 未サポート 未サポート 52.0 (52.0) 未サポート 未サポート ?
stretch 57.0 未サポート 52.0 (52.0) 未サポート 44.0 ?

[1] バージョン 27 まで、Firefox は単一ラインの flexbox のみサポートしていました。Firefox 18 および 19 で flexbox サポートを有効にするには、about:config の設定 layout.css.flexbox.enabledtrue に変更します。

[2] 接頭辞がないプロパティのサポートに加えて Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) で、ウェブ互換性の理由から、-webkit 接頭辞つきプロパティをサポートしました。これは設定項目 layout.css.prefixes.webkit で制御しており、既定値は false です。Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) より、設定項目の既定値は true です。

[3] 旧版の仕様では絶対配置の子要素を、サイズが 0 x 0 の flex アイテムであるかのように扱っていました。より新しい仕様ではそれらをフローから外して、align や justify プロパティの配置に基づいて位置を決めます。Chrome は新しい動作を、Chrome 52 で実装しました。

[4] キーワード startendleftright を認識しますが、未実装です。

[5] Gecko 52 (Firefox 52.0 / Thunderbird 52.0 / SeaMonkey 2.49) より前のバージョンでキーワード leftright を認識していましたが、未実装でした。

関連情報

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

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