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'.
It is documented as part of the CSS Box Alignment, CSS Flexible Box Layout specification.
Syntax
/* Usage Example */
.special-item {
align-self: center;
/* this specific item will be centered, regardless of other items */
}
/* Syntax */
align-self: auto;
align-self: normal;
align-self: stretch;
align-self: anchor-center;
/* Global values */
align-self: inherit;
align-self: initial;
align-self: revert;
align-self: revert-layer;
align-self: unset;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.
29+
20+
9+
12+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more