【CSS Modules】justify-selfプロパティの使い方

justify-selfプロパティは、CSS Grid Layoutにおいて、個々のグリッドアイテムを自身のグリッドエリア内でどのように配置するかを制御するプロパティです。このプロパティを使用すると、グリッドコンテナ内の単一のアイテムに対して、そのアラインメント軸（水平方向の配置）に沿った配置方法を細かく指定することができます。

具体的には、アイテムが占めるグリッドセルやグリッド領域の中で、そのアイテム自身を左右どちらに寄せるか、または中央に配置するか、あるいは領域いっぱいに引き伸ばすかなどを設定できます。例えば、グリッドレイアウトで配置された特定のボタンや画像だけをセルの右端に寄せたい場合や、中央に配置したい場合に大変役立ちます。

利用できる主な値は以下の通りです。 startを指定すると、アイテムは自身のグリッドエリアの開始位置（通常は左端）に揃えられます。 endを指定すると、アイテムは自身のグリッドエリアの終了位置（通常は右端）に揃えられます。 centerを指定すると、アイテムは自身のグリッドエリアの中央に配置されます。 stretchを指定すると、アイテムはグリッドエリアの利用可能な空間いっぱいに引き伸ばされます。これはデフォルト値となることが多く、アイテムに明示的な幅が指定されていない場合に特に効果的です。 autoを指定すると、親要素であるグリッドコンテナに設定されたjustify-itemsプロパティの値に従って配置されます。

justify-selfプロパティは、グリッドコンテナ全体のアイテムの配置を制御するjustify-itemsプロパティとは異なり、特定のアイテムにのみ適用されるため、より柔軟で個別具体的なレイアウト調整を実現したい場合に重要な役割を果たします。これにより、複雑なグリッドデザインの中で、個々の要素の見た目を効果的に調整することが可能になります。

Copy
1.item {
2  justify-self: center;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません