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
Explorer Edge Chrome Firefox Opera Safari
11122928179
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
4.42952189?