align-content property

Article
05/02/2017

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.

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-content, which is preferred for better standards compliance and future compatibility.

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

CSS information

Applies To	multi-line flex containers
Media	visual
Inherited	no
Initial Value	stretch

Standards information

Flexible Box Layout Module

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	Mshtml.h
IDL	Mshtml.idl
DLL	Mshtml.dll

Share via