CSS flex-wrap Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The flex-wrap CSS property is used in conjunction with CSS Flexbox to control how flex items behave when they exceed the available space within a flex container. It determines whether the flex items should wrap onto a new line when they no longer fit in the container's width. By default, flex items stay on a single line, but by setting flex-wrap to "wrap," they can wrap to the next line as necessary. This property allows for more responsive and flexible layouts, making it easier to design complex web page structures that adapt to different screen sizes and content lengths.

Initial value: nowrap
Applies to: Flex containers
Inherited: No
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.flexWrap

Interactive Demo

flex-wrap: nowrap;

flex-wrap: wrap;

flex-wrap: wrap-reverse;

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

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

Editor