CSS flex-wrap Property

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

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

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

<!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; 
      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: #ccc;">C</div>
      <div style="background-color: #666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>

In this example flexible items wrap in reverse order.

Example

<!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; 
      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: #ccc;">C</div>
      <div style="background-color: #666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>

Values

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

Browser support

29.0+
21-28 -webkit-
10.0+ -ms- 12.0+ 28.0+ 9.0+
6.1-8.0 -webkit-
12.1+



Related articles