justify-items

この記事では「justify-items」について、基本の意味と使い方を初心者向けにやさしく説明します。

Cascading Style Sheets justify-items property.

コンテナ内のアイテムの主軸方向の揃え位置を指定する

　justify-itemsプロパティは、コンテナ内のアイテムの主軸方向（初期値では横方向）のデフォルト揃え位置を指定する際に使用します。

　デフォルト揃え位置を指定するとは、コンテナボックス内のすべての子ボックスの justify-selfプロパティのデフォルト値を指定するということです。

　例えば、justify-itemsプロパティでいったんすべての子ボックスのデフォルト値を指定したうえで、justify-selfプロパティで特定の子ボックスの値を個別に指定し直すといった使い方をすると、レイアウトを詳細に制御できるかもしれません。

　コンテナ内のアイテムの交差軸方向（初期値では縦方向）のデフォルト揃え位置を指定する場合は、align-itemsプロパティを使用します。

　尚、コンテナ内のアイテムの主軸方向や交差軸方向が横になるか縦になるかは、flex-directionプロパティの値によって変化します。

値

基本キーワード

auto

ボックスに親が無いか、絶対配置されたボックスの実際の位置を決定する場合は normal と同じ結果となる。 それ以外の場合は親ボックスの justify-itemsプロパティの値に左右される。（初期値）

normal

レイアウトモードに依存

stretch

コンテナに収まるように要素を伸縮する

位置揃え

center

センターに配置

start

始端に配置

end

終端に配置

flex-start

フレックスコンテナ内の始端に配置

flex-end

フレックスコンテナ内の終端に配置

left

左寄せ配置

right

右寄せ配置

ベースライン揃え

baseline

ベースラインに揃える

first baseline

最初のベースラインに揃える

last baseline

最後のベースラインに揃える

オーバーフロー揃え

safe center

センター配置ではなくなって内容がはみ出す

unsafe center

センター配置を維持しながら内容がはみ出す

子孫へのスタイル継承

legacy

子孫にもスタイル継承させる（legacyキーワードの指定が無ければ、子孫の値は normal となる）

legacy right

子孫も右寄せにする

legacy left

子孫も左寄せにする

legacy center

子孫もセンター寄せにする

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

初期値

legacy

適用対象

すべての要素

値の継承

しない

Sample

<p>justify-items: center; を指定。</p>
<div class="sample1" style="justify-items:center;">
	<div>①</div>
	<div>②</div>
	<div>③</div>
</div>

<p>justify-items: left; を指定。</p>
<div class="sample1" style="justify-items:left;">
	<div>①</div>
	<div>②</div>
	<div>③</div>
</div>

<p>justify-items: right; を指定。</p>
<div class="sample1" style="justify-items:right;">
	<div>①</div>
	<div>②</div>
	<div>③</div>
</div>

.sample1 {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	grid-gap: 4px;
	background-color: palegreen;
	margin: 10px;
}

.sample1 div {
	width: 80px;
	padding: 10px;
	background-color: green;
}