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

HTML

<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>

CSS

.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;
}

Result