Sponsored Link
プロパティ・値の解説
| プロパティ | 指定の効果 | 値 |
|---|---|---|
| align-content | フレックスコンテナの枠全体の交差軸方向の揃え方を指定 | stretch(初期値)・flex-start・flex-end・center・space-between・space-around |
CodePenで動作チェック
align-content・・・フレックスコンテナの枠全体の交差軸方向の揃え方を指定
See the Pen プロパティ: align-content by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.
プロパティ「align-content」の値によるそれぞれの挙動は以下でも確認できます。
align-contentプロパティの値による挙動の違い
CSS Demo: align-content(mozilla.net)
※start・・・flex-startです。
フレックスコンテナの枠全体の交差軸方向の揃え方を指定するプロパティ
値に関しては「justify-content」と同様になるため割愛します。
「justify-content」は主軸方向の揃え方の指定でしたが、この「align-content」はフレックスコンテナの枠全体の交差軸方向の揃え方の指定です。
基本的に高さが固定の場合などに使用することがあります。交差軸ならではの配置方法が出てきます。
また前述の「align-items」は非常によく似たプロパティですが、「align-items」はコンテナ行内での整列方法の指定で、「align-content」は内部の枠全体の整列方法の指定です。