W3cubDocs

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

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

nowrap | wrap | wrap-reverse

Examples

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: 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;
}

Results

Specifications

Specification Status Comment
CSS Flexible Box Layout Module
The definition of 'flex-wrap' in that specification.
Candidate Recommendation
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

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 29
29
21
Prefixed
Prefixed Requires the vendor prefix: -webkit-
12 28 11
11
Partial support due to large number of bugs present. See Flexbugs.
17 9
Mobile
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support 4.4
4.4
Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
29
29
25
Prefixed
Prefixed Requires the vendor prefix: -webkit-
12 52 12.1 9.2 ?

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap