flex-wrap
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
The flex-wrap
CSS property 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
The flex-flow
property shorthand can be used to set both the flex-direction
and flex-wrap
properties, which define the flex container's main and cross axes, respectively.
Syntax
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
The flex-wrap
property 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 of inline-start or block-start, depending on the
flex-direction
value. This is the default value. wrap
-
The flex items break into multiple lines. The cross-start is the equivalent of inline-start or block-start, depending on the current writing mode, and the
flex-direction
value. wrap-reverse
-
Behaves the same as
wrap
, but cross-start and cross-end are inverted.
Formal definition
Initial value | nowrap |
---|---|
Applies to | flex containers |
Inherited | no |
Computed value | as specified |
Animation type | discrete |
Formal syntax
Examples
Setting flex container wrap values
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
/* 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