Web/CSS/flex-wrap

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.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

See Using CSS flexible boxes for more properties and information.

Syntax

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

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

The flex-wrap property is specified as a single keyword chosen from the list of values below.

Values

The following values are accepted:

nowrap: The flex items are laid out in a single line which may cause the flex container to overflow. The cross-start is either equivalent to start or before depending on the flex-direction value. This is the default value.
wrap: The flex items break into multiple lines. The cross-start is either equivalent to start or before depending flex-direction value and the cross-end is the opposite of the specified cross-start.
wrap-reverse: Behaves the same as wrap but cross-start and cross-end are permuted.

Formal definition

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

Formal syntax

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: #fff;
    font: 100 24px/100px sans-serif;
    height: 150px;
    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	Status	Comment
CSS Flexible Box Layout ModuleThe definition of 'flex-wrap' in that specification.	Candidate Recommendation

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`flex-wrap`	Chrome Full support 29 Full support 29 Full support 21 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Edge Full support 12	Firefox Full support 28	IE Partial support 11 Notes' Partial support 11 Notes' Notes' Partial support due to large number of bugs present. See Flexbugs.	Opera Full support 17	Safari Full support 9 Full support 9 Full support 6.1 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	WebView Android Full support 4.4 Full support 4.4 Full support ≤37 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Chrome Android Full support 29 Full support 29 Full support 25 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Android Full support 52	Opera Android Full support 18	Safari iOS Full support 9 Full support 9 Full support 6.1 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Samsung Internet Android Full support 2.0 Full support 2.0 Full support 1.5 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-

Legend

Full support: Full support
Partial support: Partial support
See implementation notes.': See implementation notes.
Requires a vendor prefix or different name for use.': Requires a vendor prefix or different name for use.