CSS flex-wrap Property

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

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

<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

The following table will show you the current browser support for the CSS flex-wrap property.

Desktop
Edge Chrome Firefox Opera Safari
122928179
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
295218924.4

Last updated by CSSPortal on: 1st January 2024