【CSS Modules】self-position型の使い方
self-position型の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
self-positionプロパティは、FlexboxやCSS Gridレイアウトにおいて、個々のアイテムの自己配置に関する設定値を保持するプロパティです。このプロパティは、親コンテナの全体的な配置ルールとは別に、特定のアイテムに個別の整列・配置方法を適用するために用いられます。
この概念には、主にalign-self、justify-self、そしてそれらをまとめたplace-selfといったプロパティ群が属します。align-selfはFlexコンテナの交差軸やGridコンテナのブロック軸方向で、justify-selfはGridコンテナのインライン軸方向（Gridアイテムのみ）で、それぞれアイテムの整列・配置を制御します。
これらの自己配置プロパティを活用することで、コンテナ内の特定の要素を他と異なる位置に配置し、個別にレイアウト調整が可能です。CSS Modules環境では、self-position関連のプロパティをローカルスコープのクラスに適用することで、コンポーネントごとの柔軟なレイアウト調整を効率的に実現できます。
公式リファレンス: <self-position>
構文(syntax)
1align-self: center;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません