The CSS flex-wrap property specifies whether flex items are forced into a single line or can be wrapped onto multiple lines. If wrapping is allowed, this property also enables you to control the direction in which lines are stacked.

flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;

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

Initial value nowrap
Applies to flex containers
Inherited no
Media visual
Computed value as specified
Animation type discrete
Canonical order the unique non-ambiguous order defined by the formal grammar

See Using CSS flexible boxes for more properties and information.


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


The following values are accepted:

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 flex-direction value.
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.
Behaves the same as wrap but cross-start and cross-end are permuted.

Formal syntax

nowrap | wrap | wrap-reverse



<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>
<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>
<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>


/* Common Styles */
.content2 {
    color: #fff;
    font: 100 24px/100px sans-serif;
    height: 150px;
    text-align: center;

.content div,
.content1 div,
.content2 div {
    height: 50%;
    width: 50%;
.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;



Specification Status Comment
CSS Flexible Box Layout Module
The definition of 'flex-wrap' in that specification.
Candidate Recommendation

Browser compatibility

Feature Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 29 12 28 111 17 9
Feature Android webview Chrome for Android Edge mobile Firefox for Android IE mobile Opera Android iOS Safari
Basic support 4.4 ? 12 52 11 12.1 9.2

1. Partial support due to large number of bugs present. See Flexbugs.

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.