CSS Flexbox - flex-flow Property

CSS flex-flow is a shorthand property that determines the direction of a flex container and the wrapping behavior of its content.

This property enables flex items to wrap onto multiple lines in a horizontal row when they exceed the container's width.

The flex-flow property is a shorthand for the following CSS properties:

Possible Values

  • row − The flex items are displayed in a horizontal direction from left to right.

  • row-reverse − The flex items are displayed in a horizontal direction but in reverse order from right to left.

  • column − The flex items are displayed in a vertical direction from top to bottom.

  • column-reverse − The flex items are displayed in a vertical direction but in reverse order from bottom to top.

  • nowrap − The flex items should not wrap or break into the next line.

  • wrap − The flex item should wrap to the next line.

  • wrap-reverse − The flex items should wrap to the next line in reverse order.

Applies to

Flex containers.

Syntax

<flex-direction>

flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;

<flex-wrap>

flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;

<flex-direction> and <flex-wrap>

flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;

CSS flex-flow - row Value

The following example demonstrates use of flex-flow: row property. The flex items display in a horizontal direction −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      flex-flow: row;
      background-color: green;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
      <div>Flex item 6</div>
      <div>Flex item 7</div>
      <div>Flex item 8</div>
   </div>
</body>
</html>

CSS flex-flow - row-reverse Value

The following example demonstrates that the flex-flow: row property arranges flex items in a horizontal direction from right to left −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      flex-flow: row-reverse;
      background-color: green;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
      <div>Flex item 6</div>
      <div>Flex item 7</div>
      <div>Flex item 8</div>
   </div>
</body>
</html>

CSS flex-flow - column Value

The following example demonstrates that the flex-flow: column property arranges flex items in a vertical direction −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      flex-flow: column;
      background-color: green;
      width: 100%;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>

CSS flex-flow - column-reverse Value

The following example demonstrates that the flex-flow: column property arranges flex items in a vertical direction but displays in a reverse order from bottom to top −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      flex-flow: column-reverse;
      background-color: green;
      width: 100%;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>

CSS flex-flow - nowrap Value

The following example demonstrates that flex-flow: nowrap property prevents the flex items from wrapping to the next line −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      flex-flow: nowrap;
      background-color: green;  
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <h4>As you resize the browser window the flex items are displayed in a single row without wrapping.</h4>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>

CSS flex-flow - wrap Value

The following example demonstrates use of flex-flow: wrap property. Here the flex items wraps to the next line −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      flex-flow: wrap;
      background-color: green;  
      width: 100%;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <h4>As you rsize the browser window the flex items should be wrap to the next line.</h4>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
      <div>Flex item 6</div>
      <div>Flex item 7</div>
   </div>
</body>
</html>

CSS flex-flow - wrap-reverse Value

The following example demonstrates use of flex-flow: wrap-reverse property. Here the flex items wraps to the next line in reverse order −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      flex-flow: wrap-reverse;
      background-color: green;  
      width: 100%;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <h4>As you rsize the browser window the flex items should be wrap to the next line in reverse order.</h4>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
      <div>Flex item 6</div>
      <div>Flex item 7</div>
   </div>
</body>
</html>

CSS flex-flow - row wrap Value

The following example demonstrates that flex-flow: row wrap property arranges the flex items in a row and wraps to the next line −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      flex-flow: row wrap;
      background-color: green;  
      width: 100%;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <h4>As you rsize the browser window the flex items should be wrap to the next line.</h4>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
      <div>Flex item 6</div>
      <div>Flex item 7</div>
   </div>
</body>
</html>
Advertisements