交差軸揃え (Align Items)
交差軸に沿ったアイテムの配置を制御します。
alignItems プロパティは、現在のライン上の交差軸におけるフレックスアイテムのデフォルトの配置動作を定義します。これは交差軸方向(主軸に垂直)の justifyContent と考えることができます。
値
| 值 | 説明 |
|---|---|
Stretch | デフォルト。交差軸サイズが auto のアイテムを、その行のサイズまで引き伸ばします(min/max 制約に従います)。 |
FlexStart | アイテムを交差軸の始端に配置します。 |
FlexEnd | アイテムを交差軸の終端に配置します。 |
Center | アイテムを交差軸の中央に配置します。 |
Baseline | エンジンが計算したベースラインに基づいてアイテムを配置します。測定関数から独自の文字ベースラインを返す API はありません。 |
Start / End はコンテナの論理方向、SelfStart / SelfEnd はアイテム自身の direction に従って配置します。安全な配置には SafeStart、SafeEnd、SafeFlexStart、SafeFlexEnd、SafeCenter、SafeSelfStart、SafeSelfEnd があり、内容が収まらない場合は始端配置に戻して始端側のはみ出しを防ぎます。
alignItems は Grid のブロック軸にも適用されます。Grid のインライン軸には同じ AlignItems 列挙型を取る justifyItems を使います。未設定のプロパティは undefined を返し、表のデフォルト値はレイアウト時の動作を示します。
例
Loading Preview…