CSS - flex-flow Property

Quiz

CSS flex-flow is a shorthand property for defining the values of properties flex-direction and flex-wrap which determine the direction of a flex container and the wrapping behavior of its content respectively in one single statement. The elements must be flexible in order for the property to show its effect.

Syntax

flex-flow: flex-direction flex-wrap | initial | inherit;

Property Values

Value	Description
flex-direction	It specifies the direction of the flexible item. Possible values are: row, row-reverse, column, column-reverse, initial and inherit. Default is row.
flex-wrap	It specifies whether the flexible item should wrap or not. Possible values are: nowrap, wrap, wrap-reverse, initial and inherit
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Flex Flow Property

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

Flex Flow Property with Row Direction

To set the direction and wrap of the element in single statement, we use the flex-flow property. It takes either single value or two values. In the following example, two values have been used flex-direction: row and flex-wrap: nowrap, wrap and wrap-reverse.

Example

<!DOCTYPE html>
<html>

<head>

   <style>
      .container {
         background-color: lightgray;
         padding: 10px;
         margin-bottom: 20px;
      }

      .item {
         background-color: #4CAF50;
         color: white;
         border: 1px solid black;
         padding: 10px;
         margin: 5px;
         flex: 0 0 100px;
      }

      .container1 {
         display: flex;
         flex-flow: row nowrap;
         width: 400px;
      }

      .container2 {
         display: flex;
         flex-flow: row wrap;
         width: 300px;
      }

      .container3 {
         display: flex;
         flex-flow: row wrap-reverse;
         width: 300px;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-flow Property
   </h2>
   <p>
      <strong>
         Flex Flow: row nowrap
      </strong> 
      -Items are arranged in a row and do not wrap, causing 
      horizontal overflow if the items exceed the container's
      width.
   </p>
   <div class="container container1">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
   </div>
   <p>
      <strong>
         Flex Flow: row wrap
      </strong> 
      - Items are arranged in a row and wrap onto
      the next line if there isn't enough space 
      in the container.
   </p>
   <div class="container container2">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
   </div>
   <p>
      <strong>
         Flex Flow: row wrap-reverse
      </strong> 
      - Items are arranged in a row and wrap onto the next
      line in reverse order if there isn't enough space in
      the container.
   </p>
   <div class="container container3">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
   </div>

</body>

</html>

Flex Flow Property with Row Reverse Direction

To set the direction and wrap of the element in single statement, we use the flex-flow property. It takes either single value or two values. In the following example, two values have been used flex-direction: row-reverse and flex-wrap: nowrap, wrap and wrap-reverse.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgray;
         padding: 10px;
         margin-bottom: 20px;
      }

      .item {
         background-color: #4CAF50;
         color: white;
         border: 1px solid black;
         padding: 10px;
         margin: 5px;
         flex: 0 0 100px;

      }

      .container1 {
         display: flex;
         flex-flow: row-reverse nowrap;
         width: 400px;
         margin-left: auto;
      }

      .container2 {
         display: flex;
         flex-flow: row-reverse wrap;
         width: 300px;

      }

      .container3 {
         display: flex;
         flex-flow: row-reverse wrap-reverse;
         width: 300px;

      }
   </style>
</head>

<body>
   <h2>
      CSS flex-flow property
   </h2>
   <p>
      <strong>
         Flex Flow: row-reverse nowrap
      </strong> 
      - Items are arranged in a row in reverse order and
      do not wrap, causing horizontal overflow if the 
      items exceed the container's width.
   </p>
   <div class="container container1">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
   </div>
   <p>
      <strong>
         Flex Flow: row-reverse wrap
      </strong> 
      - Items are arranged in a row in reverse order
      and wrap onto the next line if there isn't 
      enough space in the container.
   </p>
   <div class="container container2">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
   </div>
   <p>
      <strong>
         Flex Flow: row-reverse wrap-reverse
      </strong> 
      - Items are arranged in a row in reverse order
      and wrap onto the next line in reverse order
      if there isn't enough space in the container.
   </p>
   <div class="container container3">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
   </div>

</body>

</html>

Flex Flow Property with Column Direction

To set the direction and wrap of the element in single statement, we use the flex-flow property. It takes either single value or two values. In the following example, two values have been used flex-direction: column and flex-wrap: nowrap, wrap and wrap-reverse.

Example

<!DOCTYPE html>
<html>

<head>

   <style>
      .container {
         background-color: lightgray;
         padding: 10px;
         margin-bottom: 20px;
         width: 300px;
         height: 400px;
         overflow: auto;
      }

      .item {
         background-color: #4CAF50;
         color: white;
         border: 1px solid black;
         padding: 10px;
         margin: 5px;
         flex: 0 0 100px;
      }

      .container1 {
         display: flex;
         flex-flow: column nowrap;
      }

      .container2 {
         display: flex;
         flex-flow: column wrap;
      }

      .container3 {
         display: flex;
         flex-flow: column wrap-reverse;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-flow property
   </h2>
   <p>
      <strong>
         Flex Flow: column nowrap
      </strong> 
      - Items are arranged in a vertical column and do
      not wrap. Vertical scrolling will occur if the 
      items exceed the container's height.
   </p>
   <div class="container container1">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
   </div>
   <p>
      <strong>
         Flex Flow: column wrap
      </strong> 
      - Items are arranged in a vertical column and
      wrap onto the next line when there isn't enough
      space in the container.
   </p>
   <div class="container container2">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
      <div class="item">
         Item 6
      </div>
      <div class="item">
         Item 7
      </div>
   </div>
   <p>
      <strong>
         Flex Flow: column wrap-reverse
      </strong> 
      - Items are arranged in a vertical column and wrap
      onto the next line in reverse order when there
      isn't enough space in the container.
   </p>
   <div class="container container3">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
      <div class="item">
         Item 6
      </div>
      <div class="item">
         Item 7
      </div>
   </div>

</body>

</html>

Flex Flow Property with Column Reverse Direction

To set the direction and wrap of the element in single statement, we use the flex-flow property. It takes either single value or two values. In the following example, two values have been used flex-direction: column-reverse and flex-wrap: nowrap, wrap and wrap-reverse.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgray;
         padding: 10px;
         margin-bottom: 20px;
         width: 300px;
         height: 400px;
         overflow: auto;
      }

      .item {
         background-color: #4CAF50;
         color: white;
         border: 1px solid black;
         padding: 10px;
         margin: 5px;
         flex: 0 0 100px;
      }

      .container1 {
         display: flex;
         flex-flow: column-reverse nowrap;
      }

      .container2 {
         display: flex;
         flex-flow: column-reverse wrap;
      }

      .container3 {
         display: flex;
         flex-flow: column-reverse wrap-reverse;
      }
   </style>
</head>

<body>
   <h2>
      CSS Flex Flow Property with column-reverse
   </h2>
   <p>
      <strong>
         Flex Flow: column-reverse nowrap
      </strong> 
      - Items are arranged in a vertical column in reverse
      order and do not wrap. Vertical scrolling will occur
      if the items exceed the container's height.
   </p>
   <div class="container container1">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
   </div>
   <p>
      <strong>
         Flex Flow: column-reverse wrap
      </strong> 
      - Items are arranged in a vertical column in reverse
      order and wrap onto the next column when there isn't
      enough vertical space in the container.
   </p>
   <div class="container container2">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
      <div class="item">
         Item 6
      </div>
      <div class="item">
         Item 7
      </div>
   </div>
   <p>
      <strong>
         Flex Flow: column-reverse wrap-reverse
      </strong> 
      - Items are arranged in a vertical column in reverse
      order and wrap onto the next column in reverse order
      when there isn't enough vertical space in the container.
   </p>
   <div class="container container3">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
      <div class="item">
         Item 6
      </div>
      <div class="item">
         Item 7
      </div>
   </div>
</body>

</html>

Flex Flow Property with only Flex Direction Values

To set the direction and wrap of the element in single statement, we use the flex-flow property. It takes upto two value. If single value is given the other value is the default value of the property. In the following example, single values have been used flex-direction: row and flex-direction: row-reverse, the flex-wrap takes the default "nowrap" value in both the cases.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 2px solid #000;
         padding: 10px;
         margin-bottom: 20px;
         width: 50%;
      }

      .item {
         background-color: #4CAF50;
         color: white;
         border: 1px solid black;
         padding: 10px;
         margin: 5px;
         flex: 0 0 100px;
      }

      .container1 {
         display: flex;
         flex-flow: row;
      }

      .container2 {
         margin-left: auto;
         display: flex;
         flex-flow: row-reverse;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-flow property
   </h2>
   <p>
      <strong>
         Flex Flow: row (nowrap)
      </strong> 
      - Items are arranged in a horizontal row from left
      to right and do not wrap. Horizontal scrolling will
      occur if the items exceed the container's width.
   </p>
   <div class="container container1">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
   </div>
   <p>
      <strong>
         Flex Flow: row-reverse (nowrap)
      </strong> 
      - Items are arranged in a horizontal row in reverse
      order from right to left and do not wrap. Horizontal
      scrolling will occur if the items exceed the 
      container's width.
   </p>
   <div class="container container2">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
   </div>
</body>

</html>

Flex Flow Property with only Flex Direction Values

To set the direction and wrap of the element in single statement, we use the flex-flow property. It takes upto two value. If single value is given the other value is the default value of the property. In the following example, single values have been used flex-direction: column and flex-direction: column-reverse, the flex-wrap takes the default "nowrap" value in both the cases.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgray;
         padding: 10px;
         margin-bottom: 20px;
         width: 50%;
      }

      .item {
         background-color: #4CAF50;
         color: white;
         border: 1px solid black;
         padding: 10px;
         margin: 5px;
         flex: 0 0 100px;
      }

      .container1 {
         display: flex;
         flex-flow: column;
      }

      .container2 {
         display: flex;
         flex-flow: column-reverse;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-flow property
   </h2>
   <p>
      <strong>
         Flex Flow: row (nowrap)
      </strong> 
      - Items are arranged in a vertical column from
      top to bottom and do not wrap.
   </p>
   <div class="container container1">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
   </div>
   <p>
      <strong>
         Flex Flow: row-reverse (nowrap)
      </strong> 
      - Items are arranged in a vertical column in reverse
      order from bottom to top and do not wrap. 
   </p>
   <div class="container container2">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
   </div>
</body>

</html>

Flex Flow Property with only Flex Wrap Values

To set the direction and wrap of the element in single statement, we use the flex-flow property. It takes upto two value. If single value is given the other value is the default value of the property. In the following example, single values have been used flex-wrap: nowrap, flex-wrap: wrap, and flex-wrap: wrap-reverse ,the flex-direction takes the default "row" value in all the cases.

Example

<!DOCTYPE html>
<html>

<head>

   <style>
      .container {
         border: 2px solid #000;
         padding: 10px;
         margin-bottom: 20px;
         width: 50%;
      }

      .item {
         background-color: #4CAF50;
         color: white;
         border: 1px solid black;
         padding: 10px;
         margin: 5px;
         flex: 0 0 100px;
      }

      .container1 {
         display: flex;
         flex-flow: nowrap;
      }

      .container2 {
         display: flex;
         flex-flow: wrap;
      }

      .container3 {
         display: flex;
         flex-flow: wrap-reverse;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-flow property
   </h2>
   <p>
      <strong>
         Flex Flow: nowrap
      </strong> 
      - Items are arranged in a horizontal row from left
      to right and do not wrap.
   </p>
   <div class="container container1">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
   </div>
   <p>
      <strong>
         Flex Flow: wrap
      </strong> 
      - Items are arranged in a horizontal row in reverse
      order from right to left and do not wrap.
   </p>
   <div class="container container2">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
   </div>
   <p>
      <strong>
         Flex Flow: wrap-reverse
      </strong> 
      - Items are arranged in a horizontal row in reverse
      order from right to left and do not wrap.
   </p>
   <div class="container container2">
      <div class="item">
         Item 1
      </div>
      <div class="item">
         Item 2
      </div>
      <div class="item">
         Item 3
      </div>
      <div class="item">
         Item 4
      </div>
      <div class="item">
         Item 5
      </div>
   </div>
</body>

</html>

Supported Browsers

Property
flex-flow	29.0	11.0	28.0	9.0	17.0

css_properties_reference.htm

Print Page