CSSjustify-items プロパティは、ボックスのすべてのアイテムに既定の justify-self を定義し、それぞれのボックスの調整を適切な軸に沿って、既定の方法で行ないます。

このプロパティの効果は、現在のレイアウトモードに依存します。

  • ブロックレベルレイアウトでは、内包ブロック内のアイテムをインライン軸で配置します。
  • 絶対位置指定の要素では、 top, left, bottom, right の各オフセット値を反映して、内包ブロック内のアイテムをインライン軸で配置します。
  • 表のセルレイアウトでは、このプロパティは無視されます (絶対配置及び表レイアウトのブロック内の配置についてはこちら)
  • フレックスボックスレイアウトでは、このプロパティは無視されます (フレックスボックス内での配置についてはこちら)
  • グリッドレイアウトでは、グリッド領域内のアイテムをインライン軸に配置します (グリッドレイアウト内での配置についてはこちら)

構文

/* 基本キーワード */
justify-items: auto;
justify-items: normal;
justify-items: stretch;

/* 位置による配置 */
justify-items: center;     /* 中央付近にアイテムを集める */
justify-items: start;      /* 開始側にアイテムを集める */
justify-items: end;        /* 終端側にアイテムを集める */
justify-items: flex-start; /* 開始側にフレックスアイテムを集める */
justify-items: flex-end;   /* 終端側にフレックスアイテムを集める */
justify-items: self-start;
justify-items: self-end;
justify-items: left;       /* 左側にアイテムを集める */
justify-items: right;      /* 右側にアイテムを集める */

/* ベースラインの配置 */
justify-items: baseline;
justify-items: first baseline;
justify-items: last baseline;

/* あふれたときの配置 (位置による配置時のみ) */
justify-items: safe center;
justify-items: unsafe center;

/* 従来の配置 */
justify-items: legacy right;
justify-items: legacy left;
justify-items: legacy center;

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

このプロパティは4つの異なる形式のうち1つを取ることができます。

  • 基本キーワード: キーワード値 normal, auto, stretch のうちの一つ。
  • ベースラインによる配置: baseline キーワードに加えて、任意で first 又は last のどちらか。
  • 位置による配置: center, start, end, flex-start, flex-end, self-start, self-end, left, right のうちの一つ。加えて任意で safe 又は unsafe
  • 歴史的な配置: legacy キーワードに続いて、 left 又は right のどちらかの値。

auto
使用される値は、ボックスに親があれば、親ボックスの justify-items プロパティ、そうでなければ絶対位置であり、このような場合、 autonormal を表します。
normal
このキーワードの効果は、現在のレイアウトモードに依存します。
  • ブロックレベルレイアウトでは、このキーワードは start の別名です。
  • 絶対位置のレイアウトでは、このキーワードは置換の絶対位置ボックスには start のように動作し、その他の絶対位置ボックスには stretch のように動作します。
  • 表のセルレイアウトでは、このキーワードは意味を持たず、無視されます。
  • フレキシブルボックスのレイアウトでは、このキーワードは意味を持たず、無視されます。
  • グリッドレイアウトでは、このキーワードは stretch のうちの一つと似た動作をしますが、アスペクト比や固有の寸法を持つボックスは start のように振舞います。
start
アイテムは適切な軸で配置コンテナーの開始側に向かって、互いに接するように詰められます。
end
アイテムは適切な軸で配置コンテナーの終端側に向かって、互いに接するように詰められます。
flex-start
フレックスコンテナーの子ではないアイテムにおいては、この値は start のように扱われます。
flex-end
フレックスコンテナーの子ではないアイテムにおいては、この値は end のように扱われます。
self-start
アイテムは適切な軸で、アイテムの開始側にある配置コンテナーの辺に向けて、互いに接するよう詰められます。
self-end
アイテムは適切な軸で、アイテムの終端側にある配置コンテナーの辺に向けて、互いに接するよう詰められます。
center
アイテムは配置コンテナーの中央で、互いに接するように詰められます。
left
アイテムは配置コンテナーの左端に向かって、互いに接するように詰められます。プロパティの軸がインライン軸に平行でない場合は、この値は start のように動作します。
right
アイテムは配置コンテナーの右端に向かって、互いに接するように詰められます。プロパティの軸がインライン軸に平行ではない場合は、この値は start のように動作します。
baseline
first baseline

last baseline
first- 又は last-baseline 配置への参加を指定します。ボックスの最初又は最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。
first baseline の代替配置は startlast baseline の代替配置は end です。
stretch
アイテムの寸法の合計が配置コンテナーの寸法より小さい場合に、寸法が auto であるすべてのアイテムは (比例的にではなく) 均等に引き伸ばされます。ただし、 max-height/max-width (あるいは同等の機能) による制限は尊重します。これにより、寸法の合計が配置コンテナーを主軸に沿って完全に埋めるようになります。
safe
アイテムの寸法が配置コンテナーをあふれた場合、アイテムは配置モードが start であったかのように配置されます。
unsafe
アイテムのと配置コンテナーの寸法の関係にかかわらず、指定した値を尊重します。
legacy
値がボックスの子孫に継承されるようにします。なお、子孫が justify-self: auto の値を持っている場合、 legacy キーワードは子孫からは考慮されず、関連付けられた left, right, center の値のみが継承されます。

形式文法

normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ]

where
<baseline-position> = [ first | last ]? baseline
<overflow-position> = unsafe | safe
<self-position> = center | start | end | self-start | self-end | flex-start | flex-end

仕様書

仕様書 状態 備考
CSS Box Alignment Module Level 3
justify-items の定義
草案 初回定義

初期値legacy
適用対象すべての要素
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序構文通り

ブラウザーの対応

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

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 52Edge 完全対応 12Firefox 完全対応 20IE 完全対応 11Opera 完全対応 12.1Safari 完全対応 9WebView Android 完全対応 52Chrome Android 完全対応 52Edge Mobile 完全対応 ありFirefox Android 完全対応 20Opera Android 完全対応 12.1Safari iOS 完全対応 9.2Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

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

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

凡例

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

関連情報

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

このページの貢献者: mfuji09
最終更新者: mfuji09,