It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

The CSS Align-Self Property

Reading time 1 min
Published Aug 8, 2017
Updated Oct 15, 2019

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

Browser image
Chrome
29+
Browser image
Edge
12+
Browser image
Firefox
20+
Browser image
IE
11+
Browser image
Opera
12.1+
Browser image
Safari
9+

Mobile browser support

Browser image
Chrome
29+
Browser image
Firefox
20+
Browser image
Opera
12.1+
Browser image
Safari
9+