CSS flex-wrap Property

❮ Prev Next ❯

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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.