CSSリファレンス
align-contentの意味と使い方
「align-content」はフレックスコンテナ内のフレックスアイテムを複数の行に配置し、交差軸の方向に余白が生じる場合に、フレックスと余白をどのように配置するのかを指定するプロパティです。このプロパティは、複数行のフレックスコンテナに適用します。
値の指定方法
flex-start
すべての行はフレックス・コンテナの始端側に寄せて配置されます。交差軸方向の余白は最後の行とフレックス・ボックスの終端との間に配置されます。
flex-end
すべての行はフレックス・コンテナ終端側に寄せて配置されます。交差軸方向の余白は最初の行とフレックス・コンテナの始端との間に配置されます。
center
全ての行はフレックス・ボックスの中央に寄せられます。交差軸方向の余白は均等に2分割され、それぞれ最初のラインの前と最後のラインの後ろに配置されます。
space-between
最初の行がフレックス・ボックスの始端側に、最後の行がフレックス・ボックスの終端側に寄せて配置されます。残りの行は、交差軸方向の余白が各行の間で均等に分配されるようにして配置されます。
space-around
すべての行は、交差軸方向の余白が各フレックス・アイテムの間で均等に分配されるようにして配置されますが、先頭と末尾の余白は他の余白の半分になります。
stretch
余白が各行へ均等に分配され、すべての行が交差軸方向の余白を使用するように拡張されます。