align-content property
Specifies how a flex item's lines align within the flex container when there is extra space along the axis that is perpendicular to the axis defined by the IHTMLCSSStyleDeclaration3::flexdirection property.
This property is read/write.
![]() ![]() |
Syntax
HRESULT put_align-content( [in] DOMString val ); HRESULT get_align-content( [out] DOMString **ptr );
Property values
Type: DOMString
String format
stretch | flex-start | flex-end | center | space-between | space-around
CSS information
| Applies To | multi-line flex containers |
|---|---|
| Media | visual |
| Inherited | no |
| Initial Value | stretch |
Standards information
Remarks
Prior to IE11, this property was known as -ms-flex-line-pack. For more information on these compatibility changes, see Flexible box ("Flexbox") layout updates.
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-content property only has an effect when the flex container has multiple lines of flex items.
The following image displays the values for IHTMLCSSStyleDeclaration3::align-content and their effects on a flex container.

Examples
The example below shows the effect of IHTMLCSSStyleDeclaration3::align-content on a flex container with multiple lines.
<div id="flexContainer"> <div class="green">1</div> <div class="blue">2</div> <div class="green">3</div> <div class="blue">4</div> <div class="green">5</div> <div class="blue">6</div> </div>
In the CSS below, IHTMLCSSStyleDeclaration3::align-content is set to space-around. Here, lines are evenly distributed in the flex container, with half-size spaces on either end.

#flexContainer {
height: 250px;
width: 400px;
border: solid 1px #949494;
display: flex;
flex-flow: row wrap;
align-content: space-around;
}
.green {
width: 120px;
background: #66CC33;
}
.blue {
width: 120px;
background: #0099FF;
}
Requirements
|
Minimum supported client |
Windows 7 |
|---|---|
|
Minimum supported server |
Windows Server 2008 R2 |
|
Header |
|
|
IDL |
|
|
DLL |
|

