flex-wrap

BaselineWidely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers sinceSeptember 2015.

Theflex-wrapCSSproperty sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.

Try it

Theflex-flowproperty shorthand can be used to set both theflex-directionandflex-wrapproperties, which define the flex container's main and cross axes, respectively.

Syntax

css
flex-wrap: nowrap; /* Default value */
flex-wrap: wrap;
flex-wrap: wrap-reverse;

/* Global values */
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: revert;
flex-wrap: revert-layer;
flex-wrap: unset;

Values

Theflex-wrapproperty is specified as a single keyword chosen from the following values below:

nowrap

The flex items are laid out in a single line which may cause the flex container to overflow. The cross-start is the equivalent ofinline-start or block-start,depending on theflex-directionvalue. This is the default value.

wrap

The flex items break into multiple lines. The cross-start is the equivalent ofinline-start or block-start,depending on the currentwriting mode,and theflex-directionvalue.

wrap-reverse

Behaves the same aswrap,but cross-start and cross-end are inverted.

Formal definition

Initial valuenowrap
Applies toflex containers
Inheritedno
Computed valueas specified
Animation typediscrete

Formal syntax

flex-wrap =
nowrap|
wrap|
wrap-reverse

Examples

Setting flex container wrap values

HTML

html
<h4>This is an example for flex-wrap:wrap</h4>
<div class= "content" >
<div class= "red" >1</div>
<div class= "green" >2</div>
<div class= "blue" >3</div>
</div>
<h4>This is an example for flex-wrap:nowrap</h4>
<div class= "content1" >
<div class= "red" >1</div>
<div class= "green" >2</div>
<div class= "blue" >3</div>
</div>
<h4>This is an example for flex-wrap:wrap-reverse</h4>
<div class= "content2" >
<div class= "red" >1</div>
<div class= "green" >2</div>
<div class= "blue" >3</div>
</div>

CSS

css
/* Common Styles */
.content,
.content1,
.content2 {
color: #fff;
font: 100 24px/100px sans-serif;
height: 150px;
width: 897px;
text-align: center;
}

.content div,
.content1 div,
.content2 div {
height: 50%;
width: 300px;
}
.red {
background: orangered;
}
.green {
background: yellowgreen;
}
.blue {
background: steelblue;
}

/* Flexbox Styles */
.content {
display: flex;
flex-wrap: wrap;
}
.content1 {
display: flex;
flex-wrap: nowrap;
}
.content2 {
display: flex;
flex-wrap: wrap-reverse;
}

Results

Specifications

Specification
CSS Flexible Box Layout Module Level 1
#flex-wrap-property

Browser compatibility

BCD tables only load in the browser

See also