CSS justify-items 属性

定義と用法

justify-items属性はグリッドコンテナーで設定され、子要素（グリッドアイテム）が行内方向にアライメントされます。

英語ページでは、行内方向は左から右、ブロック方向は下向きです。

この属性にアライメント効果を有効にするには、グリッドアイテムが行内方向上で自身の周りに利用可能なスペースを確保する必要があります。

ヒント：ブロック方向ではなく行内方向でグリッドアイテムをアライメントするには、 align-items属性 属性。

も参照してください：

CSSチュートリアル：CSS Grid

CSSチュートリアル：CSS定位

CSSリファレンスマニュアル：align-items属性

CSSリファレンスマニュアル：direction属性

CSSリファレンスマニュアル：grid属性

CSSリファレンスマニュアル：grid-template-columns属性

CSSリファレンスマニュアル：justify-self属性

CSSリファレンスマニュアル：position属性

CSSリファレンスマニュアル：writing-mode属性

例

例 1

各グリッドアイテムをそのグリッドユニットの末尾に沿って行内方向にアライメントします：

#container {
  display: grid;
  justify-items: end;
}

実際に試してみてください

例 2：justify-itemsとjustify-selfの比較

コンテナに対するアライメント方法を「中央」に設定し、グリッドアイテム自体を「右寄せ」に設定します。属性値 'right' が優先されます：

#container {
  display: grid;
  justify-items: center;
}
.blue {
  justify-self: right;
}

実際に試してみてください

例 3：絶対定位のグリッドアイテムにjustify-itemsを設定

絶対定位のグリッドアイテムのアライメント方法を「右寄せ」に設定します：

#container {
  display: grid;
  position: relative;
  justify-items: right;
}
.blue {
  position: absolute;
}

実際に試してみてください

例 4：writing-mode

グリッドコンテナーエレメントのwriting-mode属性値がvertical-rlに設定された場合、行内方向は下向きになります。その結果、コンテナの起点は左側から上側に、コンテナの末端は右側から下側に移動します：

#container {
  justify-items: end;
  writing-mode: vertical-rl;
}

実際に試してみてください

例 5：direction

グリッドコンテナの direction 属性値が「rtl」に設定されている場合、行内方向は右から左です。結果として、コンテナの先頭が左から右に、コンテナの末端が右から左に移動します：

#container {
  justify-items: start;
  direction: rtl;
}

実際に試してみてください

CSS 文法

justify-items: legacy|normal|stretch|ポジショナル対称|overflow-alignment|ベースライン対称|initial|inherit;

属性値

値 説明
legacy

デフォルト値。

「legacy」で始まる場合にのみ、justify-self 値が 'auto' のグリッドアイテムはグリッドコンテナの justify-items 属性値を継承します。

これは HTML の <center> 要素と align 属性の古い対称行動を実現するために存在しています。
normal レイアウトのコンテキストによって異なりますが、グリッドレイアウトの 'stretch' に似ています。
stretch inline-size（幅）が設定されていない場合、グリッドセルを満たすために伸ばします。
start 行内方向の先頭にプロジェクトを対称にします。
left プロジェクトを左対称にします。
center プロジェクトを中心に対称にします。
end 行内方向の終わりにプロジェクトを対称にします。
right プロジェクトを右対称にします。
overflow-alignment
  • 'safe' は、内容がオーバーフローする場合、プロジェクトの対称方式を 'start' に設定します。
  • 'unsafe' は、プロジェクトの内容がオーバーフローするかどうかに関係なく、対称値を保ちます。
baseline-alignment 要素と親要素のベースラインを対称にします。
initial この属性をデフォルト値に設定します。参照してください： initial。
inherit 親要素からこの属性を継承します。参照してください： inherit。

技術的詳細

デフォルト値： legacy
継承： いいえ
アニメーション作成： サポートしていません。参照してください：アニメーション関連属性。
バージョン： CSS3
JavaScript 文法： object.style.justifyItems="center"

ブラウザのサポート

このテーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
57.0 16.0 45.0 10.1 44.0