align-self
Allows you to override the default alignment for a single item inside a Flex or Grid container. While 'align-items' sets the default for everyone, 'align-self' lets one item 'do its own thing'.
Quick example
.special-item {
align-self: center;
/* this specific item will be centered, regardless of other items */
}Quick facts
Initial value
autoInherited
No
Applies to
flex items, grid items, and absolutely positioned boxes
Animation type
discrete
Values
autonormalstretchanchor-center align-self Browser Support
Widely available Since 2015 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.
Safe to use without fallbacks.
29+
20+
9+
12+