CSS

Cascading Style Sheets justify-self property.

justify-self

　justify-selfプロパティは、コンテナ内の個別アイテムの横方向（主軸方向）の揃え位置を指定する際に使用します。

　コンテナ内の個別アイテムの縦方向（交差軸方向）の揃え位置を指定する場合は、align-selfプロパティを使用します。

値

基本キーワード
auto
ボックスに親が無いか、絶対配置されたボックスの実際の位置を決定する場合は normal と同じ結果となる。それ以外の場合は親ボックスの justify-itemsプロパティの値に左右される。（初期値）
normal
レイアウトモードに依存。
stretch
コンテナに収まるように要素を伸縮する。
位置揃え
center
センターに配置。
start
始端に配置。
end
終端に配置。
flex-start
フレックスコンテナ内の始端に配置。
flex-end
フレックスコンテナ内の終端に配置。
self-start
始端に配置。
self-end
終端に配置。
left
左寄せ配置。
right
右寄せ配置。
ベースライン揃え
baseline
ベースラインに揃える。
first baseline
最初のベースラインに揃える。
last baseline
最後のベースラインに揃える。
オーバーフロー揃え
safe center
センター配置ではなくなって内容がはみ出す。
unsafe center
センター配置を維持しながら内容がはみ出す。

初期値・適用対象・値の継承

初期値
auto
適用対象
ブロックレベルボックス、絶対配置されたボックス、グリッドアイテム。
値の継承
しない。

Sample

中ボックスに justify-self:center;を指定。左50px・中50px・右50px。

左
中
右

中ボックスに justify-self:center;を指定。左50px・中50px・右100px。

左
中
右

中ボックスに justify-self:center;を指定。左50px・中50px・右150px。

左
中
右

HTML source


<p>中ボックスに justify-self:center;を指定。左50px・中50px・右50px。</p>
<div class="sample">
	<div class="sLeft" style="width:50px;">左</div>
	<div class="sCenter" style="width:50px; justify-self:center;">中</div>
	<div class="sRight" style="width:50px;">右</div>
</div>

<p>中ボックスに justify-self:center;を指定。左50px・中50px・右100px。</p>
<div class="sample">
	<div class="sLeft" style="width:50px;">左</div>
	<div class="sCenter" style="width:50px; justify-self:center;">中</div>
	<div class="sRight" style="width:100px;">右</div>
</div>

<p>中ボックスに justify-self:center;を指定。左50px・中50px・右150px。</p>
<div class="sample">
	<div class="sLeft" style="width:50px;">左</div>
	<div class="sCenter" style="width:50px; justify-self:center;">中</div>
	<div class="sRight" style="width:150px;">右</div>
</div>

CSS source


.sample {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: 80px;
	background-color: palegreen;
}

.sLeft {
	grid-column: 1;
	background-color: green;
}

.sCenter {
	grid-column: 2;
	background-color: orange;
}

.sRight {
	grid-column: 3;
	background-color: green;
}