トップページ  > CSS  > justify-items

★CSSリファレンス

justify-items …… コンテナ内のアイテムの横方向のデフォルト揃え位置を指定する
Internet Explorer Google Chrome Safari Firefox Opera
広告

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

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

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

■値

基本キーワード
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
適用対象
すべての要素
値の継承
しない

■使用例

CSSソース

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

div.sample1 div {
	width:100px;
	margin:2px; padding:10px; font-size:10px;
	background-color:green; color:white;
}

HTMLソース

<h5>justify-items:center;を指定</h5>
<div class="sample1" style="justify-items:center;">
<div>一</div>
<div>ニ</div>
<div>三</div>
</div>

<h5>justify-items:left;を指定</h5>
<div class="sample1" style="justify-items:left;">
<div>一</div>
<div>ニ</div>
<div>三</div>
</div>

<h5>justify-items:right;を指定</h5>
<div class="sample1" style="justify-items:right;">
<div>一</div>
<div>ニ</div>
<div>三</div>
</div>
↓↓↓

ブラウザ上の表示

justify-items:center;を指定
justify-items:left;を指定
justify-items:right;を指定
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ