CSS justify-self 属性

定義と使用方法

justify-self 属性は、グリッドセル内で行内方向にグリッドアイテムをアライメントします。

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

この属性がどのアライメント効果を持つかを確認するには、グリッドアイテムが行内方向上で自身の周りに空きスペースを持っている必要があります。

ヒント：ブロック方向ではなく行内方向にグリッドアイテムをアライメントする場合は、以下を使用してください： align-self 属性 または align-items 属性 属性。

参照してください：

CSS 教程：CSS Grid

CSS 教程：CSS 定位

CSS 参考マニュアル：align-content 属性

CSS 参考マニュアル：align-items 属性

CSS 参考マニュアル：align-self 属性

CSS 参考マニュアル：direction 属性

CSS 参考マニュアル：grid 属性

CSS 参考マニュアル：grid-template-columns 属性

CSS 参考マニュアル：position 属性

CSS 参考マニュアル：writing-mode 属性

参照してください：

例

例 1

グリッドユニットの右側にグリッドアイテムをアライメントします：

.red {
  display: grid;
  justify-self: right;
}

自分で試してみてください

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

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

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

自分で試してみてください

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

絶対定位のグリッドアイテムのアライメントを 'right' に設定します：

#container {
  display: grid;
  position: relative;
}
.red {
  position: absolute;
  justify-self: right;
}

自分で試してみてください

例 4：writing-mode

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

#container {
  display: grid;
  writing-mode: vertical-rl;
}
.blue {
  justify-self: end;
}

自分で試してみてください

例 5：direction

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

#container {
  display: grid;
  direction: rtl;
}
.blue {
  justify-self: end;
}

自分で試してみてください

CSS 文法

justify-self: auto|normal|stretch|ポジショナルアライメント|overflow-alignment|ベースラインアライメント|initial|inherit;

属性値

値 説明
auto デフォルト値。グリッドコンテナのjustify-self属性値を継承します。
normal

レイアウトのコンテキストによって異なりますが、sizeが設定されていないときのグリッドアイテムのグリッドレイアウト内の「stretch」に似ています。

sizeが設定されている場合、属性値の動作は「start」に似ています。
stretch inline-size（幅）が設定されていない場合、グリッドセルを満たすために伸ばします。
start 行内方向の開始にプロジェクトをアライメントします。
left プロジェクトを左アライメントします。
center プロジェクトを中央にアライメントします。
end 行内方向の終わりにプロジェクトをアライメントします。
right プロジェクトを右アライメントします。
overflow-alignment
  • 「safe」は、内容がオーバーフローするときにプロジェクトのアライメント方式を「start」に設定します。
  • 「unsafe」は、プロジェクトの内容がオーバーフローするかどうかに関わらず、アライメント値を保持します。
ベースラインアライメント 要素と親要素のベースラインを合わせます。
initial この属性をデフォルト値に設定します。参照してください： initial。
inherit 親要素からこの属性を継承します。参照してください： inherit。

技術的詳細

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

ブラウザのサポート

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

クローム エッジ ファイアフォックス サファリ オペラ
クローム IE / エッジ ファイアフォックス サファリ オペラ
57.0 16.0 45.0 10.1 44.0