The CSS property that specifies the alignment of an individual flex item along the cross axis is align-self.
Flexbox has two conceptual axes. The main axis follows flex-direction, while the cross axis runs perpendicular to it. With the default flex-direction: row, the main axis is horizontal and the cross axis is vertical. The align-self property controls one item’s cross-axis alignment and can use values such as flex-start, center, flex-end, baseline, stretch, or auto.
The closely related align-items property sets the default cross-axis alignment for all items in a flex container. Setting align-self on one item overrides that inherited default for the individual item. align-content is different: it distributes multiple flex lines when wrapping creates more than one line. justify-content generally handles distribution along the main axis.
Flexbox grew from layout work in the late 2000s and became a major CSS layout model for responsive interfaces. The same align-self property is also used with CSS Grid, where it aligns an item within its grid area, but its meaning remains self-alignment rather than container-wide alignment.