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

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

{align-self: 位置;}

個別に指定しない場合は、align-itemsプロパティで揃え位置を指定します。

align-selfの値の指定方法

align-selfプロパティで指定できる値は、align-itemsプロパティで指定できる値とほぼ同じで、次のようになっています。

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

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

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

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

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

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

autoを指定すると、親要素のフレックスコンテナのalign-itemsプロパティの値に従って配置されます。

親要素を持たない場合は、stretchと同じになります。