justify-content property

Specifies a how flex items are aligned along the main axis of the flex container after any flexible lengths and auto margins are resolved.

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

This property is read/write.

Syntax

HRESULT put_justify-content(
  [in]  DOMString val
);

HRESULT get_justify-content(
  [out] DOMString **ptr
);

Property values

Type: DOMString

String format

flex-start | flex-end | center | space-between | space-around

CSS information

Standards information

• Flexible Box Layout Module

Remarks

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

This property typically helps redistribute free space that's available after items reach their maximum size or space left over from inflexible items.

This property aligns the lines of elements within a flex container in relation to the main axis. 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.

The following image displays the values for the IHTMLCSSStyleDeclaration3::justify-content property and their effects on flex items.

As of Internet Explorer for Windows Phone 8.1 Update, Internet Explorer for Windows Phone supports the deprecated "-webkit-box-pack" property for interoperability purposes. Because "-webkit-box-pack" does not have an equivalent to the space-around value, if the computed value for IHTMLCSSStyleDeclaration3::justify-content is space-around, the computed value for "-webkit-box-pack" is returned as "".

Examples

In the example below, IHTMLCSSStyleDeclaration3::justify-content is set to space-around for the following flex container. Because there is extra space in this flex container, the extra space is distributed evenly between each flex item on the line, with spacing at the start of the line and the end of the line being half the size as the extra space between each flex item.

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

#flexContainer {
   width: 250px;
   border: solid 1px #949494;
   display: flex;
   justify-content: space-around;
}
#item1 {
   width: 50px;
   background: #66CC33;
}
#item2 {
   width: 50px;
   background: #0099FF;
}
#item3 {
   width: 50px;
   background: #66CC33;
}

Requirements