【CSS Modules】align-itemsプロパティの使い方
align-itemsプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
align-itemsプロパティは、CSS FlexboxやCSS Gridレイアウトにおいて、コンテナ内の子要素（アイテム）を交差軸方向（デフォルトで垂直方向）にどのように配置するかを制御するプロパティです。このプロパティを用いることで、高さの異なる複数のアイテムを効率的に整列させることができます。
主な設定値として、初期値のstretchがあります。これはアイテムを交差軸の利用可能な空間に合わせて引き伸ばします。flex-startはアイテムを交差軸の開始位置に揃え、flex-endは終了位置に揃えます。centerはアイテムを交差軸の中心に配置し、baselineはアイテム内のテキストのベースラインを揃えるために使用します。
このプロパティは親要素（FlexコンテナまたはGridコンテナ）に適用され、そのすべての子要素の配置に影響を与えます。個別のアイテムの配置を制御したい場合は、align-selfプロパティを利用します。ウェブコンテンツの垂直方向のレイアウト調整に不可欠であり、レスポンシブデザインで広く利用されています。
公式リファレンス: align-items
構文(syntax)
1.container { 2 align-items: center; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません