Override the container's setting
align-self
This property sets the alignment of a single element within a flexbox container.
Property values
This property is meaningful only on elements that are directly within a flexbox container.
It overrides the container's setting for align-items, allowing an individual element to be aligned differently from its peers.
Use one of these keywords to align the element to its peers:
| flex-start | The top [left] of the item is aligned with its peers |
| flex-end | The bottom [right] of the item is aligned with its peers |
| center | The item is aligned with its peers along the middle of its height [width] |
| baseline | The element's typographic baseline (of it's first line of text) is used for alignment with its peers |
| stretch | The item's height [width] is stretched to match its peers |
Examples
align-self: flex-start;