Override the container's setting


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


align-self: flex-start;

style > flexbox > align-selfOverride the container's setting