align-self property

Specifies the alignment value (perpendicular to the layout axis defined by the flex-direction property) of flex items of the flex container.

This property is read/write.

Syntax

Property values

One of the following alignment values.

auto

Initial value. If the flex item has a parent flex container, align-self is equal to the align-items property of the parent. Otherwise, it's equal to stretch.

flex-start

If the flex container has a computed value for flex-direction of "row" or "column", the leading edge (or baseline) of each flex item is aligned with the leading edge of the flex container. Any remaining space, perpendicular to the layout axis, is placed after the trailing edge of each flex item.

If the flex container has a computed value for flex-direction of "row-reverse" or "column-reverse", the trailing edge (or baseline) of each flex item is aligned with the trailing edge of the flex container. Any remaining space, perpendicular to the layout axis, is placed before the leading edge of each flex item.

flex-end

If the flex container has a computed value for flex-direction of "row" or "column", the trailing edge of each flex item is aligned with the trailing edge of the flex container. Any remaining space, perpendicular to the layout axis, is placed before the leading edge of each flex item.

If the flex container has a computed value for flex-direction of "row-reverse" or "column-reverse", the leading edge of each flex item is aligned with the leading edge of the flex container. Any remaining space, perpendicular to the layout axis, is placed after the trailing edge of each flex item.

center

Each flex item is centered between the leading and trailing edges of the flex container. Any remaining space, perpendicular to the layout axis, is evenly distributed before and after flex item.

baseline

The baselines (leading edge or trailing edge depending on the flex-direction property) of all flex items are aligned with each other.

The flex item that occupies the most space, perpendicular to the layout axis, follows the flex-start rule. The baselines of all remaining flex items are then aligned with the baseline of this element.

stretch

Each flex item is stretched to completely fill the space that is available perpendicular to the layout axis. If set, height or width related properties for a flex item takes precedence and layout follows the flex-start rule.

CSS information

Applies To	flex items
Media	visual
Inherited	no
Initial Value	auto

Standards information

Flexible Box Layout Module

Remarks

As of Microsoft Edge, the "-ms-" prefixed version of this property is not supported.

As of Internet Explorer for Windows Phone 8.1 Update and Microsoft Edge, IE supports "-webkit-align-self" as an alias for this property.

Prior to Internet Explorer 11, this property was known as -ms-flex-item-align. For more information on these compatibility changes, see Flexible box ("Flexbox") layout updates.

Typically, the main axis follows the same direction as text—for example, if the text in your flex container runs left to right, the main axis is the horizontal axis.

Be aware that these are writing-mode and direction dependent keywords. The starting and ending edges of the flex container and flex items depend on the layout direction. For instance, for a left-to-right layout, the starting edge is the left edge of the flex container, for a top-to-bottom layout the starting edge is the top edge and so on. Likewise, the ending edge of a flex item is the right edge in a left-to-right layout, the bottom edge in a top-to-bottom layout, and so on.

The align-self property allows the value for the align-items property to be overridden for individual flex items. The following image displays the values for align-self and their effects on flex items.

An illustration showing the different property values for align-self

Examples

The example below shows the effect of align-self on a flex item. Below is a flex container with three flex items.

HTML


<div id="flexContainer">
   <div id="item1">1</div>
   <div id="item2">2</div>
   <div id="item3">3</div>
</div>

In the CSS below, the align-items property is set to flex-start. On the first flex item, align-self is set to stretch. Here, the value that was set for align-items has been overridden on the first flex item.

A flex container showing the align-self property

CSS


#flexContainer {
   height: 100px;
   border: solid 1px #949494;
   display: flex;  
   align-items: flex-start;
} 

#item1 {
   width: 50px;
   background: #66CC33;
   align-self: stretch;
}

#item2 {
   width: 50px;
   background: #0099FF;
}
	
#item3 {
   width: 50px;
   background: #66CC33;
}