行揃え (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…

次のステップ

© 2026 ByteLand Technology Limited