CSS flex-wrap Property
Description
The flex-wrap
property determines whether the flex container will be single-line or multi-line. By default, the container is single-line; for multi-line containers, it is allowed to control the direction in which the flex elements are placed.
- Initial value
- nowrap
- Applies to
- Flex containers
- Inherited
- No
- Media
- Visual
- Computed value
- As specified
- Animatable
- No
- CSS Version
- CSS3
- JavaScript syntax
- object.style.flexWrap
Syntax
flex-wrap: nowrap | wrap | wrap-reverse
Values
- nowrapIndicates that flex items line up on a single line. This is the default value.
- wrapIndicates that flex elements inside the container are located in several horizontal rows (in case of overflow). Flex elements are placed from left to right with the ltr direction (global HTML dir attribute, or CSS direction property with ltr value), and with rtl value they are placed from right to left.
- wrap-reverseIndicates that the flex elements inside the container are arranged in several horizontal rows (in case of overflow) similar to the wrap value, but the lines are formed in the reverse order.
Example
<h3>flex-wrap:nowrap;</h3>
<div class="container"><div>A</div><div>B</div><div>C</div></div>
<h3>flex-wrap:wrap;</h3>
<div class="container2"><div>A</div><div>B</div><div>C</div></div>
<h3>flex-wrap:wrap-reverse;</h3>
<div class="container3"><div>A</div><div>B</div><div>C</div></div>
.container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.container2 {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.container3 {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
div > div {
width: 40%;
height: 25px;
border: 1px solid orange;
background: white;
}
Browser Support
Desktop | |||||
11 | 12 | 29 | 28 | 17 | 9 |
Tablets / Mobile | |||||
![]() |
|||||
4.4 | 29 | 52 | 18 | 9 | ? |