【CSS Modules】place-self省略形プロパティの使い方
place-self省略形プロパティの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
place-selfプロパティは、グリッドレイアウトやフレックスボックスレイアウトにおいて、個々のアイテムが自身に割り当てられた空間内でどのように配置されるかを制御するためのショートハンドプロパティです。このプロパティを使用することで、align-selfとjustify-selfという二つのプロパティの値を一度に設定することができます。
align-selfプロパティは、アイテムのブロック軸方向、通常は垂直方向における配置を定義します。一方、justify-selfプロパティは、インライン軸方向、通常は水平方向における配置を定義します。place-selfプロパティに一つの値を指定すると、その値はalign-selfとjustify-selfの両方に適用され、アイテムは両方の軸で同じように配置されます。例えば、place-self: center;と指定すると、アイテムは水平方向と垂直方向の両方で中央に配置されます。
二つの値を指定することも可能で、この場合、最初の値はalign-selfに適用され、二番目の値はjustify-selfに適用されます。例えば、place-self: start end;と指定すると、アイテムはブロック軸方向の先頭に、インライン軸方向の末尾に配置されます。
このプロパティは、親コンテナが設定する全体の配置ルールから独立して、特定のアイテムのみを個別に配置調整したい場合に非常に便利です。start、end、center、stretch、autoといった値を使用でき、それぞれアイテムを領域の先頭、末尾、中央に配置したり、利用可能な空間全体に引き伸ばしたりします。主にCSS GridやFlexboxの子要素に対して適用され、柔軟なレイアウト構築に貢献します。
構文(syntax)
1.item { 2 place-self: center; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません