Contents
Using the align-self property
If you're using the align-items property on a specific Flexbox container and you wish to align some items differently, you can override the container alignment by using the align-self property for one or multiple individual items:
Example
div {
-webkit-align-self: center; /* Safari 7.0 and newer */
align-self: center;
}CSS align-self property syntax
The syntax requirements are simple. After you define the property, you need to assign one of the available property values:
align-self: value;
You can find all the property values available for use with CSS align-self in the table below.
Property values
| Value | Description |
|---|---|
| auto | The default value. The element will inherit its parent container's align-items property value, or be stretched if it has no parent container |
| stretch | Stretches the elements to fit the flex container |
| center | Positions the element at the start of the flex container |
| flex‑start | Positions the element at the start of the flex container |
| flex-end | Positions the element at the end of the flex container |
| baseline | Positions the element at the baseline of the flex container |
| initial | Sets the property to the default value |
| inherit | Inherits the property from the parent element |
Note: just like align-items, align-self cannot be inherited or animated.
Browser support
Chrome
29+
Edge
12+
Firefox
20+
IE
11+
Opera
12.1+
Safari
9+
Mobile browser support
Chrome
29+
Firefox
20+
Opera
12.1+
Safari
9+