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	?