justify-self in block layouts

概要

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

対応ブラウザ

基本構文

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

実務での使いどころ

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

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

注意点

アクセシビリティ

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

参考リンク

• MDN Web Docs — justify-self in block layouts