【CSS Modules】align-selfプロパティの使い方
align-selfプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
align-selfプロパティは、CSSのFlexboxまたはCSS Gridレイアウトにおいて、個々のアイテム（子要素）のクロス軸方向における配置方法を制御するプロパティです。このプロパティは、親要素であるFlexコンテナやGridコンテナに設定されるalign-itemsプロパティの値を、特定のアイテムに対して個別に上書きするために使用されます。これにより、複数のアイテムがある場合でも、その中の一部のアイテムだけを異なる位置に揃えることが可能となります。
具体的には、align-selfプロパティをアイテムに適用することで、そのアイテムをクロス軸の開始位置に配置する（flex-start）、終了位置に配置する（flex-end）、中央に配置する（center）、親要素のalign-itemsプロパティの値に従う（auto）、アイテムの高さを親要素の高さに合わせて引き伸ばす（stretch、ただし明示的な高さが指定されていない場合）、といった様々なアライメント設定が行えます。特にautoは初期値であり、親要素の指定が適用されることを意味します。
このプロパティは、レイアウトの柔軟性を高め、特定の要素だけを意図した位置に配置したい場合に非常に有用です。たとえば、ヘッダーのナビゲーションメニューで特定のロゴだけを中央に配置し、他のメニュー項目は開始位置に揃える、といった細かいデザイン調整に活用できます。このように、全体のアライメントルールに例外を設けることで、より複雑で動的なレイアウトを実現するための重要なツールとなります。
公式リファレンス: align-self
構文(syntax)
1align-self: center;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません