align-self

レイアウト・配置

FlexboxやGridの子要素が個別に縦方向（交差軸）の配置を上書きするプロパティです。親のalign-itemsを上書きし、特定のアイテムだけ異なる配置を実現できます。

構文

Syntax

align-self: flex-start;

実行結果

Item 1

align-self: start

Item 3

2番目のアイテムが上揃え

交差軸の開始位置に配置

align-self: flex-end;

実行結果

Item 1

align-self: end

Item 3

2番目のアイテムが下揃え

交差軸の終了位置に配置

align-self: stretch;

実行結果

Item 1

align-self: stretch

Item 3

2番目のアイテムが引き伸ばされる

交差軸方向に伸縮（デフォルト）

親のalign-itemsを個別の子要素で上書きできる。1つだけ異なる配置にしたい時に便利。

親がFlexboxまたはGridでないと効果がない。align-itemsとの違いを理解する（親 vs 子）。

全ブラウザ対応