align-self property

Specifies the alignment value (perpendicular to the layout axis defined by the IHTMLCSSStyleDeclaration3::flexdirection property) of flex items of the flex container.

Note   As of Internet Explorer 11 the Microsoft vendor prefix ("-ms-") version of this property is no longer supported. Instead use the non-prefixed name align-self, which is preferred for better standards compliance and future compatibility.

This property is read/write.

Syntax

HRESULT put_align-self(
  [in]  DOMString val
);

HRESULT get_align-self(
  [out] DOMString **ptr
);

Property values

Type: DOMString

String format

auto | flex-start | flex-end | center | baseline | stretch

CSS information

Standards information

• Flexible Box Layout Module

Remarks

Prior to IE11, 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 IHTMLCurrentStyle2::writingMode 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 IHTMLCSSStyleDeclaration3::align-self property allows the value for the IHTMLCSSStyleDeclaration3::align-items property to be overridden for individual flex items. The following image displays the values for IHTMLCSSStyleDeclaration3::align-self and their effects on flex items.

Examples

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

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

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

#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;
}

Requirements

See also

IHTMLCSSStyleDeclaration3::align-items