CSS3

：

プロパティ

：

justify-items

　編集：2022.07.14 by T.A.

¶格子／フレックスコンテナ内の整列。

名前	`justify-items`
値	normal \| stretch \| <baseline-position> \| <overflow-position>? [<self-position> \| left \| right] \| legacy \| legacy && [left \| right \| center]
初期値	legacy
適用対象	すべての要素
継承	されない
百分率	受容しない
算出値	指定されたキーワード（たち） ─ ただし legacy は除く（注釈文を見よ）
正準的順序	文法に従う
アニメーション型	離散的

normal

当のレイアウトモード用の“既定の”整列を表現する ― そのふるまいは、以下の各節に述べるように、レイアウトモードに依存する。

<DIV style="display:grid;
 grid-template:50px 70px/50px 70px 100px;
 justify-items:normal;
 width:250px;
 border:1px solid red;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

stretch

対象の軸に応じて：

⮡ 横方向の場合: ［ボックスの width の算出値は auto］かつ［ボックスの margin-left、margin-right とも非 auto］ならば、ボックスの使用サイズを、次のように設定する：
min-width、max-width により課される拘束は守りつつ、ボックスの外縁サイズ（横幅）が、整列コンテナを埋めるのに必要とされる長さに可能な限り近くなるようにする
⮡ 縦方向の場合: ［height、margin-top、margin-bottom、min-height、max-height、縦幅］に関して，横方向の場合と同様とする。

この値用の既定のフォールバック整列は、一般には flex-start とするが、基底線整列選好として［最初の基底線集合／最後の基底線集合］もボックスに指定されている場合は［self-start／self-end］とする。

注記： stretch キーワードは、要素をそのコンテナに収まるように縮短させる。

<DIV style="display:grid;
 grid-template:50px 70px/50px 70px auto;
 justify-items:stretch;
 width:250px;
 border:1px solid red;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

<baseline-position> ｎ

＝[first | last]? && baseline

baseline

first baseline に算出される。

first baseline

ボックスは最初の基底線による整列に関与するものと指定する：［ボックスの最初の基底線集合に属する整列基底線］と［ボックスが属する基底線共有グループの対応する基底線］とが、整列されることになる。詳細は、§ 基底線によるボックスたちの整列法を見よ。

この値用のフォールバック整列は、［自己整列用には safe self-start／内容分布用には safe start］とする。

<DIV style="display:grid;
 grid-template:50px 70px/50px 70px 100px;
 justify-items:first baseline;
 width:250px;
 border:1px solid red;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

last baseline

ボックスは最後の基底線による整列に関与するものと指定する：［ボックスの最後の基底線集合の整列基底線］と［ボックスが属する基底線共有グループの対応する基底線］とが、整列されることになる。詳細は、§ 基底線によるボックスたちの整列法を見よ。

この値用のフォールバック整列は、［自己整列用には safe self-end／内容分布用には safe end］とする。

<DIV style="display:grid;
 grid-template:50px 70px/50px 70px 100px;
 justify-items:last baseline;
 width:250px;
 border:1px solid red;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

¶省く

<overflow-position>? [<self-position> | left | right]: 以下を参照。

<overflow-position>

＝unsafe
| safe

safe

整列対象のサイズが整列コンテナを過フローする場合、整列対象は、整列モードが start であったかのように整列される。

<DIV style="display:grid;
 grid-template:50px 70px/50px 70px 100px;
 justify-items:safe center;
 width:250px;
 border:1px solid red;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

safe center

unsafe

整列対象の［整列コンテナに対する相対的なサイズ］に関わらず、所与の整列値は尊守される。

<DIV style="display:grid;
 grid-template:50px 70px/50px 70px 100px;
 justify-items:unsafe center;
 width:250px;
 border:1px solid red;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

unsafe center

<self-position>

center

整列対象を、その整列コンテナの中で中央寄せにする。

<DIV style="display:grid;
 grid-template:50px 70px/50px 70px 100px;
 justify-items:center;
 width:250px;
 border:1px solid red;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

center

start

整列対象が整列コンテナの始端辺に接合されるように整列する。

<DIV style="display:grid;
 grid-template:50px 70px/50px 70px 100px;
 justify-items:start;
 width:250px;
 border:1px solid red;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

start

end

整列対象が整列コンテナの終端辺に接合されるように整列する。

<DIV style="display:grid;
 grid-template:50px 70px/50px 70px 100px;
 justify-items:end;
 width:250px;
 border:1px solid red;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

end

self-start

＊-content プロパティには利用できない。

整列対象の始端辺が整列コンテナの同じ側の辺に接合されるように整列する。

<DIV style="display:grid;
 grid-template:50px 70px/50px 70px 100px;
 justify-items:self-start;
 width:250px;
 border:1px solid red;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

self-start

self-end

＊-content プロパティには利用できない。

整列対象の終端辺が整列コンテナの同じ側の辺に接合されるように整列する。

<DIV style="display:grid;
 grid-template:50px 70px/50px 70px 100px;
 justify-items:self-end;
 width:250px;
 border:1px solid red;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

self-end

flex-start、 flex-end

これらの値が利用されるのは、flex レイアウトに限られる。[CSS-FLEXBOX-1]

整列コンテナ ─ すなわち flex コンテナ ─ の各辺のうち［次に与える側にあって、プロパティが対象にする軸方向にある方］に、整列対象が接合されるように整列する：

flex-start に対しては、主始端、または交叉始端
flex-end に対しては、主終端、または交叉終端

［flex-start／flex-end］値が flex 整形文脈の外側で利用されたとき ─ すなわち、次に該当するとき ─ のふるまいは［start／end］と同じになる：

flex アイテムでないボックス（または、flex コンテナの子であって絶対的に位置されたボックスの静的位置を決定するときなど、flex アイテムを装うボックス）上で、自己整列プロパティに利用されたとき
flex コンテナでないボックス上で、内容分布プロパティに利用されたとき

<DIV style="display:grid;
 grid-template:50px 70px/50px 70px 100px;
 justify-items:flex-start;
 width:250px;
 border:1px solid red;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

flex-start

<DIV style="display:grid;
 grid-template:50px 70px/50px 70px 100px;
 justify-items:flex-end;
 width:250px;
 border:1px solid red;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

flex-end

legacy

このキーワードは、実質的に、値を子孫の中へ継承させる。

このキーワードが［left／right／center］キーワードを伴わずに現れた場合、算出値は、［justify-items の継承値が legacy キーワードを含むならば継承値／他の場合は normal］になる。

他の場合、justify-self: auto にされた子は、［justify-items の値から legacy キーワードを除いた、整列キーワード］のみを参照する。これは、［HTML の［CENTER 要素／align 属性］による、旧来の整列のふるまい］を実装するために存在する。

<DIV style="display:grid;
 grid-template:50px 70px/50px 70px 100px;
 justify-items:legacy;
 width:250px;
 border:1px solid red;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

legacy

legacy && [left | right | center]

left、 right

利用できるのは justify-＊プロパティに限られる。

整列コンテナの各辺のうち［次に与える側にあって、適切な軸にある方］に、整列対象が接合されるように整列する：

left に対しては、行左端、または（物理的）左端
right に対しては、行右端、または（物理的）右端

プロパティが対象にする軸が左端⇔右端軸と平行でない場合†、これらの値は start と同じにふるまう。注記：† 現時点では，そのような事例は、［flex-direction が column にされた flex コンテナ］に限られる。

<DIV style="display:grid;
 grid-template:50px 70px/50px 70px 100px;
 justify-items:legacy left;
 width:250px;
 border:1px solid red;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

legacy left

<DIV style="display:grid;
 grid-template:50px 70px/50px 70px 100px;
 justify-items:legacy right;
 width:250px;
 border:1px solid red;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

legacy right

<DIV style="display:grid;
 grid-template:50px 70px/50px 70px 100px;
 justify-items:legacy center;
 width:250px;
 border:1px solid red;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

legacy center

テスト

ここに表示

¶[Edge]不明な点もある

ここに表示

スクリプト：

スクリプト：

表示内容：