justify-self

レイアウト・配置

Grid子要素が個別に横方向（インライン軸）の配置を指定するプロパティです。Flexboxでは効果がない点に注意。

構文

Syntax
justify-self: auto | start | end | center | stretch

コード例

例 1

justify-self: start;
実行結果
Item 1
start
Item 3
2番目のアイテムが左寄せ

セルの開始位置に配置

例 2

justify-self: center;
実行結果
Item 1
center
Item 3
2番目のアイテムが中央

セルの中央に配置

例 3

justify-self: end;
実行結果
Item 1
end
Item 3
2番目のアイテムが右寄せ

セルの終了位置に配置

💡 TIPS

Grid Layoutで個別のアイテムを配置する際に使用。Flexboxでは動作しない点に注意（Flexboxではmargin: autoを使う）。

⚠️ よくある間違い

Flexboxでは効かない！Grid専用。justify-itemsとの違いを理解する（親 vs 子）。

関連プロパティ

ブラウザサポート

Chrome 57+, Firefox 52+, Safari 10.1+