CSS flex-wrap Property

The flex-wrap property defines whether flexible items should wrap or not. In other words, it defines whether the items are forced into a single line or the items can flow on multiple lines.

If there are no flexible items, the flex-wrap property won't have any effect.

The flex-wrap property is one of the CSS3 properties.

Initial Value nowrap
Applies to Flex containers.
Inherited No.
Animatable No.
Version CSS3
DOM Syntax object.style.flexWrap = "wrap-reverse";

Syntax

flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;

Example of the flex-wrap property with the "wrap" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .wrap {
        width: 200px;
        height: 200px;
        border: 1px solid #cccccc;
        display: -webkit-flex;
        -webkit-flex-wrap: wrap;
        display: flex;
        flex-wrap: wrap;
      }
      .wrap div {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>The flex-wrap Property</h2>
    <div class="wrap">
      <div style="background-color:coral;">A</div>
      <div style="background-color:lightblue;">B</div>
      <div style="background-color:khaki;">C</div>
      <div style="background-color:pink;">D</div>
      <div style="background-color:lightgrey;">E</div>
      <div style="background-color:lightgreen;">F</div>
    </div>
  </body>
</html>

Example of the flex-wrap property with the "nowrap" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: -webkit-flex;
        -webkit-flex-wrap: nowrap;
        display: flex;
        flex-wrap: nowrap;
      }
      .example div {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-wrap property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #cccccc;">C</div>
      <div style="background-color: #666666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>

Result

Example of the flex-wrap property with the "wrap-reverse" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: -webkit-flex;
        -webkit-flex-wrap: wrap-reverse;
        display: flex;
        flex-wrap: wrap-reverse;
      }
      .example div {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-wrap property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #cccccc;">C</div>
      <div style="background-color: #666666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>

Values

Value Description Play it
nowrap Defines that flexible items won't wrap. This is the default value of this property. Play it »
wrap Defines that flexible items will wrap when it is needy. Play it »
wrap-reverse Defines that flexible items will wrap in reverse order when it is needy. Play it »
initial Makes the property use its default value. Play it »
inherit Inherits the property from its parents element.


Browser support

29.0+
21-28 -webkit-
28.0+ 9.0+
6.1-8.0 -webkit-
12.1+


Do you find this helpful?

Related articles