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;
<div class="grid"> <div class="row"> <div class="cell">flex-wrap: nowrap <div class="container nowrap"> <div class="item">A</div> <div class="item">B</div> <div class="item">C</div> <div class="item">D</div> <div class="item">E</div> </div> </div> <div class="cell">flex-wrap: wrap <div class="container wrap"> <div class="item">A</div> <div class="item">B</div> <div class="item">C</div> <div class="item">D</div> <div class="item">E</div> </div> </div> <div class="cell">flex-wrap: wrap-reverse <div class="container reverse"> <div class="item">A</div> <div class="item">B</div> <div class="item">C</div> <div class="item">D</div> <div class="item">E</div> </div> </div> </div> </div>
html,body { height: 100%; box-sizing: border-box; background: #EEE; } .grid { width: 100%; height: 100%; display: flex; font: 1em monospace; } .row { display: flex; flex: 1 auto; flex-direction: row; flex-wrap: wrap; } .col { display: flex; flex: 1 auto; flex-direction: column; } .cell { margin: .5em; padding: .5em; background-color: #FFF; overflow: hidden; text-align: center; flex: 1; white-space: nowrap; } .note { background: #fff3d4; padding: 1em; margin: .5em; font: .8em sans-serif; text-align: left; flex: 1; white-space: nowrap; } .container { font-family: sans-serif; background: #E4F0F5; padding: .5em; margin: .5em auto; text-align: left; width: 11em; overflow: hidden; display: flex; } .item { border: 1px solid black; padding: 1em; margin: .5em; } .nowrap { flex-wrap: nowrap; } .wrap { flex-wrap: wrap; } .reverse { flex-wrap: wrap-reverse; }
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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 29 | 12 | 28 | 111 | 17 | 9 |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | 4.4 | ? | 12 | 52 | 11 | 12.1 | 9.2 |
1. Partial support due to large number of bugs present. See Flexbugs.
See also
- CSS Flexbox Guide: Basic Concepts of Flexbox
- CSS Flexbox Guide: Mastering wrapping of flex items
Document Tags and Contributors
Tags:
Contributors to this page:
rachelandrew,
fscholz,
Jeremie,
andavies,
stephaniehobson,
wbamberg,
erikadoyle,
Sebastianz,
haoyuchen1992,
so_matt_basta,
duncanmcdonald,
jigs12,
Sheppy,
tregusti,
teoli,
ziyunfei,
yisi,
SJW,
kscarfone,
ethertank,
FredB,
scottrowe
Last updated by:
rachelandrew,