Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Export (0) Print
Expand All

flex-wrap property

Specifies whether flex items wrap and the direction they wrap onto multiple lines or columns based on the space available in the flex container.

This property is read/write.

Flexible Box Layout ModuleIE11

 

Syntax

flex-wrap: nowrap | wrap | wrap-reverse

Property values

One of the following values.

nowrap

Initial value. All flex items are displayed in a single row or column. The overflow property of the flex container determines whether the flex items are hidden, clipped, or scrollable.

wrap

Flex items are wrapped and displayed in successive, parallel rows or columns. The flex container expands in height or width, perpendicular to the axis defined by the writing-mode property, to accommodate the additional rows or columns.

wrap-reverse

Flex items are wrapped and displayed in successive, parallel rows or columns in reverse order. The flex container expands in height or width, perpendicular to the axis defined by the writing-mode property, to accommodate the additional rows or columns.

CSS information

Applies Toflex containers
Mediavisual
Inheritedno
Initial Valuenowrap

Standards information

Remarks

As of Microsoft Edge, the "-ms-" prefixed version of this property is not supported.

As of Internet Explorer for Windows Phone 8.1 Update and Microsoft Edge, IE supports "-webkit-flex-wrap" as an alias for this property.

Flex-wrap can also be defined within the shorthand property flex-flow.

Examples

The example below shows the different values for 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, flex-wrap is set to the initial value, nowrap. When the flex container is resized, the flex items remain in a single row.

A flex container with nowrap set for the flex-wrap property


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


In the example below, 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 writing-mode property, to accommodate the additional rows or columns.

A flex container with wrap set for the flex-wrap property


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


In this example, 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 writing-mode property, to accommodate the additional rows.

img

A flex container with wrap-reverse set for the flex-wrap property

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


See also

CSSStyleDeclaration
flex-flow

 

 

Show:
© 2015 Microsoft