Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

justify-self in block layouts

従来Gridレイアウトでのみ使えたjustify-selfが、通常のブロックレイアウトでも利用可能になります。ブロック要素のインライン方向の配置を個別に制御でき、margin: autoを使った中央揃えの代替として使用できます。justify-itemsプロパティでコンテナ内の全アイテムのデフォルト配置を設定することも可能です。

ブロック配置インライン軸

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.justify-items.block_context
実験的
130
130
130
CSS プロパティ
block context
実験的

ブロックレイアウトでサポートされています
130
130
130
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.container {
  justify-items: center;
}
.item {
  justify-self: end;
}

ライブデモ

justify-self: center

CSS Justify-self: center demo.

プレビュー全画面表示

justify-self: end

CSS Justify-self: end demo.

プレビュー全画面表示

justify-self: start

CSS Justify-self: start demo.

プレビュー全画面表示

実務での使いどころ

  • ブロック要素の水平方向配置

    ブロックレイアウトでjustify-selfを使い、特定の子要素だけ右寄せや中央寄せに配置します。

注意点

  • 2026年3月時点でChrome/Edgeのみの対応です。クロスブラウザ対応にはmargin: autoや flexboxの使用を検討してください。

アクセシビリティ

  • 視覚的な配置の変更がDOMの論理的な順序と一致していることを確認し、スクリーンリーダーでの読み上げ順序に影響がないようにしてください。

参考リンク