CSS: align-self (flex, grid)
align-self
- Property
align-selfis for a item 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)
CSS. flex layout
- CSS: Flexbox Layout
- CSS: flex-direction
- CSS: flex-wrap
- CSS: flex-flow
- CSS: gap, row-gap, column-gap (flex, grid)
- CSS: justify-content (flex, grid)
- CSS: justify-items (flex, grid)
- CSS: align-content (flex, grid)
- CSS: align-items (flex, grid)
- CSS: align-self (flex, grid)
- CSS: order (for flex items)
- CSS: flex (flex-grow, flex-shrink, flex-basis)
CSS. flex align
CSS grid layout
- CSS: Grid Layout
- CSS: grid-template-columns
- CSS: grid-template-rows
- CSS: grid repeat()
- CSS: grid-row, grid-column
- CSS: grid-area
- CSS: grid-template-areas
- CSS: gap, row-gap, column-gap (flex, grid)
- CSS: justify-content (flex, grid)
- CSS: justify-items (flex, grid)
- CSS: justify-self (grid)
- CSS: align-content (flex, grid)
- CSS: align-items (flex, grid)
- CSS: align-self (flex, grid)