flex-wrap property

Article
05/02/2017

Specifies whether flex items wrap and the direction they wrap onto multiple lines or columns based on the space available in 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 flex-wrap, which is preferred for better standards compliance and future compatibility.

This property is read/write.

Syntax

HRESULT put_flex-wrap(
  [in]  DOMString val
);

HRESULT get_flex-wrap(
  [out] DOMString **ptr
);

Property values

Type: DOMString

String format

nowrap | wrap | wrap-reverse

CSS information

Applies To	flex containers
Media	visual
Inherited	no
Initial Value	nowrap

Standards information

Flexible Box Layout Module

Remarks

IHTMLCSSStyleDeclaration3::flex-wrap can also be defined within the shorthand property IHTMLCSSStyleDeclaration3::flexFlow.

Examples

The example below shows the different values for IHTMLCSSStyleDeclaration3::flex-wrap and their effect on the flex items below.

<div id="flexContainer">
   <div id="item1">1</div>
   <div id="item2">2</div>
   <div id="item3">3</div>
   <div id="item4">4</div>
   <div id="item5">5</div>
   <div id="item6">6</div>
</div>

In this example, IHTMLCSSStyleDeclaration3::flex-wrap is set to the initial value, nowrap. When the flex container is resized, the flex items remain in a single row.

#flexContainer {
   border: solid 1px #949494;
   display: flex;
   flex-wrap: nowrap;       
}

In the example below, IHTMLCSSStyleDeclaration3::flex-wrap is set to wrap. When the flex container is resized, the flex items are wrapped and displayed in successive, parallel rows. The flex container expands in height perpendicular to the axis defined by the IHTMLCurrentStyle2::writingMode property, to accommodate the additional rows or columns.

#flexContainer {
   border: solid 1px #949494;
   display: flex;
   flex-wrap: wrap;     
}

In this example, IHTMLCSSStyleDeclaration3::flex-wrap is set to wrap-reverse. When the flex container is resized, the flex items are wrapped and displayed in successive, parallel rows in reverse order. The flex container expands in height, perpendicular to the axis defined by the IHTMLCurrentStyle2::writingMode property, to accommodate the additional rows.

img

#flexContainer {
   border: solid 1px #949494;
   display: flex;
   flex-wrap: wrap-reverse;     
}

Requirements

Minimum supported client	Windows 8
Minimum supported server	Windows Server 2012
Header	Mshtml.h
IDL	Mshtml.idl
DLL	Mshtml.dll