CSS - flex-wrap

Examples

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

/* 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: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
}
.content1 {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    flex-wrap: nowrap;
}
.content2 {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap-reverse;
}

Syntax  

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

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

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.

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 <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> wrap <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> wrap-reverse

Description  

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.

See Using CSS flexible boxes for more properties and information.

Browser Compatibility  

[1] In addition to the unprefixed support, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

	Desktop Browsers					Mobile Browsers
	Chrome for Desktop	Firefox for Desktop	Internet Explorer for Desktop	Opera for Desktop	Safari for Desktop	Android Browser	Firefox for Android	Internet Explorer Mobile	Opera Mobile	Safari for iOS
Basic Support	21.0Full support Prefixed Implementation Notes Full support21.0 Prefixed Prefixed Requires the vendor prefix: -webkit	28.0Full support	11.0Full support	12.10Full support	6.1Full support Prefixed Implementation Notes Full support6.1 Prefixed Prefixed Requires the vendor prefix: -webkit	4.4Full support	28.0Full support	11.0Full support	12.10Full support	7.0Full support Prefixed Implementation Notes Full support7.0 Prefixed Prefixed Requires the vendor prefix: -webkit

Legend

Full support 

Full support

Prefixed

Requires a vendor prefix or different name for use.

See Also  

• Using CSS flexible boxes

Specifications  

License