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.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
See Using CSS flexible boxes for more properties and information.
Syntax
flex-wrap: nowrap; /* Default value */ flex-wrap: wrap; flex-wrap: wrap-reverse; /* Global values */ flex-wrap: inherit; flex-wrap: initial; flex-wrap: unset;
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 on the
flex-direction
value. This is the default 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 definition
Initial value | nowrap |
---|---|
Applies to | flex containers |
Inherited | no |
Computed value | as specified |
Animation type | discrete |
Formal syntax
nowrap | wrap | wrap-reverse
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; 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 | 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.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
flex-wrap | Chrome
Full support
29
| Edge Full support 12 | Firefox Full support 28 | IE
Partial support
11
| Opera Full support 17 | Safari
Full support
9
| WebView Android
Full support
4.4
| Chrome Android
Full support
29
| Firefox Android Full support 52 | Opera Android Full support 18 | Safari iOS
Full support
9
| Samsung Internet Android
Full support
2.0
|
Legend
- Full support
- Full support
- Partial support
- Partial support
- See implementation notes.
- See implementation notes.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.
See also
- CSS Flexbox Guide: Basic Concepts of Flexbox
- CSS Flexbox Guide: Mastering wrapping of flex items