CSS: align-self (flex, grid)
align-self
- Property
align-selfis for children in Flexbox or Grid Layout. - It override the generic align-items (flex cross axis).
- Aligns item along the cross axis.
-
align-selfhas no effect if the container is notdisplay: flexordisplay: grid. - If a flexbox item's cross-axis margin is auto, then align-self is ignored.
Example. flex-direction row
in this example, we have flex-direction row.
1 stretch
2 baseline
3 center
4 flex-start
5 flex-end
Example. flex-direction column
in this example, we have flex-direction column.
1 stretch
2 baseline
3 center
4 flex-start
5 flex-end
Possible Values
see
auto-
Inherits from parent's
align-items(default)