MDN will be in maintenance mode on Wednesday September 20th, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

Relawan kami belum menerjemahkan artikel ini ke dalam Bahasa Indonesia. Bergabunglah dan bantu kami menyelesaikan pekerjaan ini!
Anda juga bisa membaca artikel dalam English (US).

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 valuenowrap
Applies toflex containers
Computed valueas specified
Animation typediscrete
Canonical orderthe 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 Firefox (Gecko) Chrome Edge Internet Explorer Opera Safari
Basic support 28.0 29.0 12.0 11.0[1] 17.0 9.0
Feature Firefox for Android (Gecko) Android Edge IE Phone Opera Mobile Safari Mobile
Basic support 52.0 4.4 12.0 11.0 12.1 9.2

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

See also

Tag Dokumen dan Kontributor

 Terakhir diperbarui oleh: Jeremie,