align-itemsでフレックスアイテムの垂直方向の揃え位置を指定【CSS】

align-itemsプロパティは、フレックスアイテムの垂直方向の揃え位置を指定するプロパティです。

{align-items: 位置;}

このプロパティは、フレックスコンテナに指定すると、内包するフレックスアイテムすべてに適用されます。

align-itemsの値の指定方法

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

flex-startを指定すると、フレックスコンテナの垂直軸の起点に揃えられるので、通常は上端に配置されます。

{align-items: flex-start;}

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

{align-items: flex-end;}

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

もし高さがフレックスアイテムの高さよりも小さい場合、フレックスアイテムは両方向に同じ幅だけはみ出した状態で配置されます。

{align-items: center;}

baselineを指定すると、各フレックスアイテム内のベースラインの位置が揃うように配置され、ベースラインの高さが一番大きいフレックスアイテムが基準になります。

{align-items: baseline;}

stretchを指定すると、フレックスコンテナの垂直軸の幅（高さ）に合わせて伸縮されます。

{align-items: stretch;}