W3cubDocs

/CSS

flex-wrap

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨September 2015⁩.

The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.

Try it

flex-wrap: nowrap;

flex-wrap: wrap;

flex-wrap: wrap-reverse;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div>Item One</div>
    <div>Item Two</div>
    <div>Item Three</div>
    <div>Item Four</div>
    <div>Item Five</div>
    <div>Item Six</div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  width: 80%;
  display: flex;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  width: 60px;
  margin: 10px;
}

The flex-flow property shorthand can be used to set both the flex-direction and flex-wrap properties, which define the flex container's main and cross axes, respectively.

Syntax

flex-wrap: nowrap; /* Default value */
flex-wrap: wrap;
flex-wrap: wrap-reverse;

/* Global values */
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: revert;
flex-wrap: revert-layer;
flex-wrap: unset;

Values

The flex-wrap property is specified as a single keyword chosen from the following values below:

nowrap: The flex items are laid out in a single line which may cause the flex container to overflow. The cross-start is the equivalent of inline-start or block-start, depending on the flex-direction value. This is the default value.
wrap: The flex items break into multiple lines. The cross-start is the equivalent of inline-start or block-start, depending on the current writing mode, and the flex-direction value.
wrap-reverse: Behaves the same as wrap, but cross-start and cross-end are inverted.

Formal definition

Initial value	`nowrap`
Applies to	flex containers
Inherited	no
Computed value	as specified
Animation type	discrete

Formal syntax

flex-wrap = 
  nowrap        |
  wrap          |
  wrap-reverse

Examples

Setting flex container wrap values

HTML

<h4>This is an example for flex-wrap:wrap</h4>
<div class="content">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:nowrap</h4>
<div class="content1">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:wrap-reverse</h4>
<div class="content2">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

CSS

/* Common Styles */
.content,
.content1,
.content2 {
  color: white;
  font: 100 24px/100px sans-serif;
  height: 150px;
  width: 897px;
  text-align: center;
}

.content div,
.content1 div,
.content2 div {
  height: 50%;
  width: 300px;
}
.red {
  background: orangered;
}
.green {
  background: yellowgreen;
}
.blue {
  background: steelblue;
}

/* Flexbox Styles */
.content {
  display: flex;
  flex-wrap: wrap;
}
.content1 {
  display: flex;
  flex-wrap: nowrap;
}
.content2 {
  display: flex;
  flex-wrap: wrap-reverse;
}

Results

Specifications

Specification
CSS Flexible Box Layout Module Level 1> # flex-wrap-property>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`flex-wrap`	2921	12	28	1615	97	2925	28	1614	97	2.01.5	4.44.4	97
`nowrap`	21	12	28	15	7	25	28	14	7	1.5	4.4	7
`wrap`	21	12	28	15	7	25	28	14	7	1.5	4.4	7
`wrap-reverse`	21	12	28	15	7	25	28	14	7	1.5	4.4	7