The CSS flex-wrap
property specifies whether flex items are forced into a single line or can be wrapped onto multiple lines. If wrapping is allowed, this property also enables you to control the direction in which lines are stacked.
flex-wrap: nowrap; flex-wrap: wrap; flex-wrap: wrap-reverse; /* Global values */ flex-wrap: inherit; flex-wrap: initial; flex-wrap: unset;
Initial value | nowrap |
---|---|
Applies to | flex containers |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
See Using CSS flexible boxes for more properties and information.
Syntax
The flex-wrap
property is specified as a single keyword chosen from the list of values below.
Values
The following values are accepted:
nowrap
- The flex items are laid out in a single line which may cause the flex container to overflow. The cross-start is either equivalent to start or before depending
flex-direction
value. wrap
- The flex items break into multiple lines. The cross-start is either equivalent to start or before depending
flex-direction
value and the cross-end is the opposite of the specified cross-start. wrap-reverse
- Behaves the same as
wrap
but cross-start and cross-end are permuted. -
Formal syntax
nowrap | wrap | wrap-reverse
Examples
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; text-align: center; } .content div, .content1 div, .content2 div { height: 50%; width: 50%; } .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 | Status | Comment |
---|---|---|
CSS Flexible Box Layout Module The definition of 'flex-wrap' in that specification. |
Candidate Recommendation |
Browser compatibility
Feature | Firefox (Gecko) | Chrome | Edge | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 28.0 | 29.0 | 12.0 | 11.0[1] | 17.0 | 9.0 |
Feature | Firefox for Android (Gecko) | Android | Edge | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 52.0 | 4.4 | 12.0 | 11.0 | 12.1 | 9.2 |
[1] Partial support due to large number of bugs present. See https://github.com/philipwalton/flexbugs.
See also
Document Tags and Contributors
Tags:
Contributors to this page:
andavies,
stephaniehobson,
wbamberg,
erikadoyle,
Sebastianz,
haoyuchen1992,
so_matt_basta,
duncanmcdonald,
jigs12,
Sheppy,
fscholz,
tregusti,
teoli,
ziyunfei,
yisi,
SJW,
kscarfone,
ethertank,
FredB,
scottrowe
Last updated by:
andavies,