【64-9】アイテムの個別配置を一度に指定する justify-items (主軸方向)

justify-selfプロパティでは指定したアイテム1個だけに効きましたが、
今回の justify-itemsプロパティは、同じ主軸方向の位置指定をアイテム全員にいっせいに効かすことができます。
ですのでコンテナ側に指定します。

主軸（インライン軸）については、
【64-1】ボックス配置の全体的なルール（9コのプロパティまとめ） をご覧ください

本日のINDEX

1. justify-itemsプロパティの値
   1. legacyという値
2. justify-itemsプロパティを使ってみた（サンプル）

ボックス配置は、下記のように記事を分けます。

【63】アイテム間の空きを指定する gap（row-gap, column-gap）

【64-1】ボックス配置の全体的なルール（9コのプロパティまとめ）

【64-2】ボックス配置の「整列キーワード」まとめ

【64-3】アイテムの配置・分布を指定する justify-content（主軸方向）

【64-4】アイテムの配置・分布を指定する align-content（交差軸方向）

【64-5】アイテムの配置・分布を指定するショートハンド place-content

【64-6】アイテム個別の配置を指定する justify-self (主軸方向)

【64-7】アイテム個別の配置を指定する align-self (交差軸方向)

【64-8】アイテム個別の配置を一括指定する place-selfショートハンド

【64-9】アイテムの個別配置を一度に指定する justify-items (主軸方向)　←今日はココ

【64-10】アイテムの個別配置を一度に指定する align-items (交差軸方向)

【64-11】アイテム配置を一括指定する place-itemsショートハンド

参考：
・CSS Box Alignment Module Level 3 | W3C Working Draft
・CSS ボックス配置 | MDN

justify-itemsプロパティの値

値は 全部整列キーワードです。

justify-itemsプロパティの値
CSS構文	normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ] legacyがデフォルト値。
<baseline-position>	[ first | last ]? baseline baseline、first baseline、last baseline の3種の書き方。 baseline 単独で使うと first baseline と同義。 first baseline の代替配置は start、 last baseline の代替配置は end 。 注意：このキーワードはW3C仕様書の冒頭で「at-risk」に入ってて「勧告候補時に落とされるかも（may be dropped during the CR period）」とあるので無くなる可能性もあります。（2022年8月記）
<overflow-position>	unsafe | safe 注意：この2つはW3C仕様書の冒頭で「at-risk」に入ってて「勧告候補時に落とされるかも（may be dropped during the CR period）」とあるので無くなる可能性もあります。（2022年8月記）
<self-position>	center | start | end | self-start | self-end | flex-start | flex-end
グローバル値	justify-self: inherit; 親の値を継承 justify-self: initial; 継承した親の値を解消しデフォルト値に戻す justify-self: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	なし	適用できる要素	すべての要素 （と仕様書にはありますが、Flexbox や テーブルセルでは無視されるようです）

CSS構文は、
normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ]
となっています。これを読み解くと、
normal、stretch、<baseline-position> は単独で使う。
<self-position> と left と right は単独で使うか、safe か unsafe を頭にくっつけて使う。
legacy は、単独でも使えるし、 left | right | center とくっつけても使える。この場合順不同（例えば「legacy left」でも「left legacy」でも良い）ということです。

| で区切るとそのうちのどれか1つだけ存在するという意味。
[ ] はひとまとまりの成分。
? は省略可能で、0または1回出現。
&& で区切ると、どっちも必須だが順不同という意味。
詳しくは CSSの値の定義構文 | MDN をご覧ください。

それぞれの整列キーワードの意味は、
【64-2】ボックス配置の「整列キーワード」まとめ でざっとまとめていますのでご覧ください。

justify-itemsプロパティのデフォルト値は legacyです。
この legacy値の動作について、W3C仕様書では下記のように書かれています。

・legacyを単独で（left | right | center を付けずに）使用した場合、そのコンテナ要素が 親の justify-items を継承している（親の justify-items が legacyキーワード＋ left | right | center である）ならその継承した値になり、
・justify-items を継承していないなら justify-items: normal になる。
・親の justify-items を継承していて、子孫のアイテムに justify-self : auto が指定されていたら、 legacyキーワードを除いた left | right | center のみが効く。

legacyについては、サンプルで試していますので、記事後半をご覧ください。

legacyという値

legacyという値は、この justify-itemsプロパティだけの値で、このプロパティのデフォルト値（何も指定しなくてもコレになる値）なんです。
ですがなんとコレ、デフォルト値なのに W3Cの仕様書で at-risk になってます。ですので勧告時にはデフォルト値が他の値になるかもしれません。（2022年8月記）

justify-itemsプロパティは、子孫要素への「継承はしない」プロパティなんですが、このlegacyキーワードを使うことで子孫に継承するんだそうです。

この legacy 、HTMLの今は亡き <center>要素と align属性の昔ながらの配置動作を実装するためにできた値だそうです。だからレガシーという名前なのかな。
（W3C仕様書での文章→ It exists to implement the legacy alignment behavior of HTML’s <center> element and align attribute.）

<center>要素と align属性は HTML4 までのもの。HTML5では廃止されました。

<center>要素は水平方向の「center」を、align属性は同じく水平方向の「left、right、center」を指定するものでしたが、HTML5では配置指定は HTMLではなく CSSでするものと定義されたため、廃止になりました。

どっちも一度指定したら子々孫々に継承しました。
この継承の動作を残すために legacy という値ができたらしいです。

例えばこんな↓かんじで、<center>要素の中に <div>要素を ひ孫まで作ると、

<center>
  親center要素
  <div>
    子要素
    <div>
      孫要素
      <div>
        ひ孫
      </div>
    </div>
  </div>
</center>

プレビューです。（廃止されているので表示できないブラウザもあるかも）
ず〜っと、水平方向の配置はセンター合わせになります。

親center要素

子要素

孫要素

ひ孫

ここで、孫の <div>要素に align属性で、「align="right"」と指定すると、

<center>
  親center要素
  <div>
    子要素
     <div align="right">
      孫要素
      <div>
        ひ孫
      </div>
    </div>
  </div>
</center>

孫以降の水平方向の配置は、右合わせに継承されます。こんな使い方でした。

親center要素

子要素

孫要素

ひ孫

こんな↑ <center> や align属性の配置を、justify-items: legacy でやれるってことらしい。
デフォルト値なので、justify-itemsプロパティを指定してなくてもこの「legacy（昔ながら）」の配置になるってことみたいです。

justify-itemsプロパティを使ってみた（サンプル）

Grid Layout で justify-items を試してみます。

Flexbox の仕様書では、ボックス配置用のプロパティは、
align-content、align-self、align-items、justify-content の4つしか無いんです。
W3C の仕様書で、justify-items の値で <self-position> があり、そこに flex-start、flex-end が入っているので、ややこしいですが、Flexアイテムには justify-items は効きません。
flex-start と flex-end は、Flexbox以外で使うと、「start」「end」として振る舞います。

サンプルの HTMLやCSS の基本はこちら。

<div class="container">
  <div>ITEM</div>
  <div>ITEM</div>
  <div>ITEM</div>
  <div>ITEM</div>
</div>

.container{
  box-sizing: border-box;
  border: 1px solid#ccc;
  padding: 0;
  display: grid;
  grid-template-rows: repeat(2, 5em);
  grid-template-columns: repeat(2, 50%);
  /*justify-items:「値」; はここに追加していきます*/
  }
.container div{
	box-sizing:border-box;
	padding:1em;
	}
.container div:nth-child(1) {background:#fcf}
.container div:nth-child(2) {background:#ffc}
.container div:nth-child(3) {background:#cfc}
.container div:nth-child(4) {background:#eee}

justify-items: auto

ITEM

ITEM

ITEM

ITEM

justify-items: normal

ITEM

ITEM

ITEM

ITEM

justify-items: stretch
アイテムサイズが auto ならコンテナに収まるようにアイテムをストレッチします。

ITEM

ITEM

ITEM

ITEM

justify-items: center

ITEM

ITEM

ITEM

ITEM

justify-items: start

ITEM

ITEM

ITEM

ITEM

justify-items: end

ITEM

ITEM

ITEM

ITEM

justify-items: self-start

ITEM

ITEM

ITEM

ITEM

justify-items: self-end

ITEM

ITEM

ITEM

ITEM

justify-items: left

ITEM

ITEM

ITEM

ITEM

justify-items: right

ITEM

ITEM

ITEM

ITEM

justify-items: baseline
「first baseline」と指定しても同じです。

ITEM

ITEM

ITEM

ITEM

justify-items: last baseline

ITEM

ITEM

ITEM

ITEM

justify-items: 指定せず（=legacy）
指定していないのでデフォルト値の「legacy」で、見たかんじは normal ですね。
親から justify-items を継承していないなら「normal」になります。

ITEM

ITEM

ITEM

ITEM

さてここで、4番目の子供のアイテム（グレーのやつ）にさらにグリッド指定して、その中に孫のグリッドアイテムを置いてみます。
ここでは親（こどもITEMの親）に justify-items を何も指定していないのでデフォルト値「legacy」です。
で、親に「left | right | center」のキーワードは指定していないので（legacy単独）、「こどもITEM」も「孫item」も「normal」の配置をしています。

こどもITEM

こどもITEM

こどもITEM

こどもITEM

孫item

孫item

justify-items: legacy right
親（こどもITEMの親）に「justify-items:legacy right」を指定してみました。
孫item も継承して右側に配置されてます。

こどもITEM

こどもITEM

こどもITEM

こどもITEM

孫item

孫item

ちなみに justify-items: right を親（こどもITEMの親）に指定してみた。
legacyキーワードがないので孫は継承せずに「normal」配置になっていますね。

こどもITEM

こどもITEM

こどもITEM

こどもITEM

孫item

孫item

今度は justify-items: legacy right を親（こどもITEMの親）に指定して、グレーの「こどもITEM」には justify-self: auto を指定してみた。
仕様書では「子孫のアイテムに justify-self: auto が指定されていたら、legacyキーワードを除いた left | right | center のみが効く」とあるので、そのとおりに「孫item」には right が効いていますね。

（これって最初のサンプルと同じなので、子に justify-self: auto があってもなくてもどっちでもいい気がしますね）

こどもITEM

こどもITEM

こどもITEM

こどもITEM

孫item

孫item

入れ子のグリッドのHTMLやCSS を貼っておきます。
（最後の「子に justify-self: auto を指定」したサンプルのコードです）

<div class="container">
  <div>こどもITEM</div>
  <div>こどもITEM</div>
  <div>こどもITEM</div>
  <div class="con_child">こどもITEM
    <div>孫item</div>
    <div>孫item</div>
  </div>
</div>

.container{
  box-sizing: border-box;
  border: 1px solid#ccc;
  padding: 0;
  display: grid;
  grid-template-rows: repeat(2, 9em);
  grid-template-columns: repeat(2, 50%);
  justify-items:legacy right;
  }
.container div{
	box-sizing:border-box;
	padding:.5em;
	}
.container div:nth-child(1) {background:#fcf}
.container div:nth-child(2) {background:#ffc}
.container div:nth-child(3) {background:#cfc}
.container div:nth-child(4) {background:#eee}
/*ここからこどもへのグリッド指定*/
.con_child{
	padding:0;
	margin:0;
	display: grid;
	grid-template-rows: repeat(2, 2.5em);
    justify-self: auto
	}	
.con_child div:nth-child(1) {background:#fcf}
.con_child div:nth-child(2) {background:#ffc}

次回予告

さて次回は、align-itemsプロパティを使ってみます。
これは、今回の justify-itemsが主軸方向だったのに対して、交差軸方向のアイテムの配置を一発で指定します。