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 の値のみが継承されます。

仕様書

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

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

ブラウザーの対応

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

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応5212201112.19
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応5252 あり2012.19.2 ?

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

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応571645 なし4410.1
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応575716454410.36.0

関連情報

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

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