CSS3

：

プロパティ

：

justify-self

　編集：2022.07.14 by T.A.

アイテム自身の整列。

名前	`justify-self`
値	auto \| normal \| stretch \| <baseline-position> \| <overflow-position>? [<self-position> \| left \| right]
初期値	auto
適用対象	ブロックレベルのボックス、絶対的に位置されたボックス、格子アイテム
継承	されない
百分率	受容しない
算出値	指定されたキーワード（たち）
正準的順序	文法に従う
アニメーション型	離散的

ボックス（整列対象）をその包含ブロック（整列コンテナ）の中で整列コンテナの［行内軸／ row 軸／主軸］方向に、両端揃えにする ─ すなわち、ボックスの外縁辺は、整列コンテナの中で、§ 整列キーワードにて述べたように整列される。

auto

次に該当するときは、normal と同じにふるまう：

ボックスには親がない／
絶対的に位置されたボックスの実際の位置を決定するとき

他の場合（絶対的に位置されたボックスの静的位置を決定するときも含む）、親ボックスの justify-items の算出値（から legacy キーワードを（もし在れば）除いたもの）と同じにふるまう。

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

auto

normal

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

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

normal

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 100px;
 width:250px;
 justify-items:start;
 border:1px solid black;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="justify-self:stretch; border:1px solid red">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

stretch

<baseline-position>

＝[ first | last ]? && baseline

baseline

first baseline に算出される。

first baseline

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

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

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

first baseline

last baseline

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

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

last baseline

<overflow-position>? [<self-position> | left | right]

以下を参照。

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

right

<DIV style="width:100px; height:70px;
 position:relative;
 border:1px solid black;
">
 <DIV style="position:absolute; top:10px; left:10px; justify-self:right; border:1px solid red">1</DIV>
</DIV>

right／position:absolute。¶

<overflow-position>

＝unsafe
| safe

safe ●

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

<DIV style="width:50px; height:100px;
 position:relative;
 border:1px solid black;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="position:absolute; justify-self:self center; border:1px solid red">22222</DIV>
</DIV>

self right／position:absolute。¶

<DIV style="display:grid;
 grid-template:'a'
	'b';
 width:50px; height:100px;
 border:1px solid black;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="justify-self:self center; border:1px solid red">22222</DIV>
</DIV>

self center／grid。¶

<DIV style="display:flex;
 flex-direction:column;
 width:50px; height:100px;
 border:1px solid black;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="justify-self:self center; border:1px solid red">22222</DIV>
</DIV>

self center／flex。¶

unsafe ●

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

<DIV style="width:50px; height:100px;
 position:relative;
 border:1px solid black;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="position:absolute; justify-self:unself center; border:1px solid red">22222</DIV>
</DIV>

unself center／position:absolute。¶

（safe と unsafe 値が指定されていない場合）：
過フロー整列が明示的に指定されていない場合の“既定のモード”は、safe と unsafe の合いの子になり、整列対象は：

その整列コンテナを過フローすることは許容されるが、
その最も近い先祖のスクロールコンテナのスクロール可能な過フロー区画も過フローすることになる場合は（すなわち、“スクロール不能な”領域まで拡がる）、その方向における過フローは、残りの過フローを反対側へ偏らせることにより制限される。

<self-position>

center ●

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

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

center

start ●

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

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

start

end ●

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

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

end

self-start ●

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

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

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

self-start

self-end ●

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

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

<DIV style="display:grid;
 grid-template:50px 70px/50px 70px 100px;
 width:250px;
 justify-items:;
 border:1px solid black;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="justify-self:self-end; border:1px solid red">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
 <DIV style="border:1px solid black">5</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;
 width:250px;
 justify-items:;
 border:1px solid black;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="justify-self:flex-start; border:1px solid red">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
 <DIV style="border:1px solid black">5</DIV>
</DIV>

flex-start

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

flex-end

テスト

ここに表示

¶[Edge]？

ここに表示

スクリプト：

スクリプト：

表示内容：

CSS3

プロパティ

justify-self

関連

テスト