行揃え (Align Content)
複数行のフレックスコンテナにおける行の配置を制御します。
alignContent プロパティは、交差軸に余分なスペースがある場合に、フレックスコンテナ内の行を配置します。このプロパティは単一行のフレックスコンテナ(flexWrap が NoWrap)には効果がありません。
値
| 值 | 説明 |
|---|---|
Stretch | デフォルト。行は残りのスペースを埋めるように引き伸ばされます。 |
FlexStart | 行はコンテナの始端に詰めて配置されます。 |
FlexEnd | 行はコンテナの終端に詰めて配置されます。 |
Center | 行はコンテナの中央に詰めて配置されます。 |
SpaceBetween | 行は均等に配置され、最初の行は始端、最後の行は終端に配置されます。 |
SpaceAround | 行は均等に配置され、各行の周囲に等しいスペースが設けられます。 |
このプロパティは Grid の行全体の配置と、Display.Block / Display.FlowRoot 内のコンテンツのブロック軸配置にも使われます。例えば高さ 100 のブロックコンテナに AlignContent.Center を指定すると、高さ 20 の単一の子要素は y = 40 に配置されます。
Start、End、SpaceEvenly、および SafeStart、SafeEnd、SafeFlexStart、SafeFlexEnd、SafeCenter も使えます。安全な値は内容が収まらない場合に始端配置へ戻ります。未設定時の読み取り値は undefined で、表のデフォルト動作は Flex レイアウトを対象としています。
例
Loading Preview…