align-contentで複数行のアイテムの垂直方向の揃え位置を指定【CSS】

align-contentプロパティは、複数行になったフレックスコンテナに内包されるフレックスアイテムの垂直軸方向の揃え位置を指定するプロパティです。

justify-contentプロパティで、フレックスアイテムの横方向（水平方向）の揃え位置を指定できますが、align-contenプロパティは縦方向（垂直方向）です。

関連記事
『justify-contentでフレックスアイテムの揃え位置を指定【CSS】』

align-contentの値の指定方法

align-contentプロパティでは、以下のような値を指定できます。

flex-start

flex-startを指定すると、フレックスコンテナの垂直軸の起点に配置されます。

flex-end

flex-endを指定すると、フレックスコンテナの垂直軸の終点に配置されます。

center

centerを指定すると、フレックスコンテナの垂直軸の中央に配置されます。

space-between

space-betweenを指定すると、フレックスコンテナの垂直軸の高さに対して余白をもって等間隔に配置されます。

最初の行は起点に、最後の行は終点に揃えられ、間の行は等間隔に配置されます。

また、余白がないときは、flex-startと同じ配置になります。

space-around

space-aroundを指定すると、フレックスコンテナの垂直軸の高さに対して余白をもって等間隔に配置されます。

space-betweenと異なるのは、最初の行と起点、最後の行と終点との間にも余白が生じるという点で、余白がないときは、centerと同じ配置になります。

stretch

stretchを指定すると、フレックスコンテナの垂直軸の高さに対して均等の幅に伸縮されます。