CSS - flex-wrap Property

Quiz

CSS flex-wrap property determines whether flex items should remain on a single line or are allowed to wrap onto multiple lines depending on the availability of space in the container they are contained in. The elements must be flexible in order for the property to show its effect.

Syntax

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

Property Values

Value	Description
nowrap	It specifies that the elements will stay on same line and will not wrap. Default.
wrap	It allows the elements to wrap if needed depending on the available space of flex container.
wrap-reverse	It allows the elements to wrap in reverse direction if needed depending on the available space of flex container.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Flex Wrap Property

The following examples explain the flex-wrap property with different values.

Flex Wrap Property with No Wrap Value

To let the flex items remain in the same line within a flex container, we use the nowrap value. The flex items will overflow if they exceed the dimensions of the container. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgray;
         display: flex;
         flex-wrap: nowrap;
         border: 2px solid #000;
         padding: 10px;
         width: 300px;
      }

      .item {
         background-color: #4CAF50;
         color: white;
         border: 1px solid black;
         padding: 10px;
         margin: 5px;
         flex-basis: 110px;
      }
      .r1 {
         background-color: #6600ff;
      }

      .r2 {
         background-color: #4CAF50;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-wrap Property
   </h2>
   <h4>
      flex-wrap: no-wrap (flex items will remain
      in same line, will overflow if they exceed
      the dimensions of the container)
   </h4>
   <div class="container">
      <div class="item r1">
         Item 1
      </div>
      <div class="item r1">
         Item 2
      </div>
      <div class="item r2">
         Item 3
      </div>
      <div class="item r2">
         Item 4
      </div>
   </div>
</body>

</html>

Flex Wrap Property with Wrap Value

To let the flex items spread across multiple lines, we use the wrap value. If the flex items start exceeding the dimesions of the container, they will move to the next line depending on the availability of space in the container. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgray;
         display: flex;
         flex-wrap: wrap;
         border: 2px solid #000;
         padding: 10px;
         width: 300px;
      }

      .item {
         color: white;
         border: 1px solid black;
         padding: 10px;
         margin: 5px;
         flex-basis: 110px;
      }

      .r1 {
         background-color: #6600ff;
      }

      .r2 {
         background-color: #4CAF50;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-wrap Property
   </h2>
   <h4>
      flex-wrap: wrap (flex items move to multiple
      lines if they exceed container dimensions)
   </h4>
   <div class="container">
      <div class="item r1">
         Item 1
      </div>
      <div class="item r1">
         Item 2
      </div>
      <div class="item r2">
         Item 3
      </div>
      <div class="item r2">
         Item 4
      </div>
   </div>
</body>

</html>

Flex Wrap Property with Wrap Reverse Value

To let the flex items spread across multiple lines in reverse direction, we use the wrap-reverse value. If the flex items start exceeding the dimesions of the container, they will move to the next line in reverse direction depending on the availability of space in the container. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgray;
         display: flex;
         flex-wrap: wrap-reverse;
         border: 2px solid #000;
         padding: 10px;
         width: 300px;
      }

      .item {
         color: white;
         border: 1px solid black;
         padding: 10px;
         margin: 5px;
         flex-basis: 110px;
      }

      .r1 {
         background-color: #6600ff;
      }

      .r2 {
         background-color: #4CAF50;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-wrap Property
   </h2>
   <h4>
      flex-wrap: wrap-reverse (flex items move to
      multiple lines in reverse direction if they
      exceed container dimensions)
   </h4>
   <div class="container">
      <div class="item r1">
         Item 1
      </div>
      <div class="item r1">
         Item 2
      </div>
      <div class="item r2">
         Item 3
      </div>
      <div class="item r2">
         Item 4
      </div>
   </div>
</body>

</html>

Supported Browsers

Property
flex-wrap	29.0	11.0	28.0	9.0	17.0

css_properties_reference.htm

Print Page