Understanding Flexbox Layouts and Flex Flow in CSS

In CSS, Flex Flow is a shorthand property that combines two other Flexbox properties: Flex Direction and Flex Wrap. The Flex Direction property defines the direction in which the flex items are laid out inside the flex container. The Flex Wrap property defines whether the flex items should wrap to the next line when they reach the end of the container.

The Flex Flow property allows you to set both Flex Direction and Flex Wrap properties in one declaration. This means that you can use Flex Flow to control the direction of the flex items and whether they should wrap to the next line.

The syntax for the Flex Flow property is as follows:

flex-flow: <flex-direction> <flex-wrap>;

The possible values for the Flex Flow property are:

row: The flex items are laid out horizontally in a row (default).
row-reverse: The flex items are laid out horizontally in a reverse order.
column: The flex items are laid out vertically in a column.
column-reverse: The flex items are laid out vertically in a reverse order.
nowrap: The flex items are not wrapped to the next line.
wrap: The flex items are wrapped to the next line if necessary.
wrap-reverse: The flex items are wrapped to the next line in reverse order if necessary.

For example, to set the flex direction to column and the flex wrap to wrap, you can use the following code:

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="flex-wrap.css">
</head>
<body>
  <div class="container">
    <div class="flex-item box-1">Box-1</div>
    <div class="flex-item box-2">Box-2</div>
    <div class="flex-item box-3">Box-3</div>
    <div class="flex-item box-4">Box-4</div>
    <div class="flex-item box-5">Box-5</div>
    <div class="flex-item box-6">Box-6</div>
    <div class="flex-item box-7">Box-7</div>
    <div class="flex-item box-8">Box-8</div>
    <div class="flex-item box-9">Box-9</div>
  </div>
</body>
</html>

flex-flow.css :

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;900&display=swap');

*{
  margin: 0;
  padding: 0;
  font-family: 'Rubik', sans-serif;

}

.container{
  border:5px solid black;
}

.flex-item{
  color:white;
  font-size: 18px;
  padding: 16px;
  text-align: center;
}

.box-1{background-color: #1abc9c;}
.box-2{background-color:#3498db;}
.box-3{background-color: #2ecc71;}
.box-4{background-color: #9b59b6;}
.box-5{background-color:#34495e;}
.box-6{background-color:#2980b9;}
.box-7{background-color:#e74c3c;}
.box-8{background-color: #d35400;}
.box-9{background-color:#2c3e50;}

/*-----------------------------------*/

.container{
  display: flex;
  /* flex-direction,flex-wrap*/
  flex-flow: row nowrap;
  flex-flow: row wrap;
  flex-flow: row wrap-reverse;

  height: 400px;
  flex-flow: column nowrap;
  flex-flow: column wrap;
  flex-flow: column wrap-reverse;
}

Live Preview

The given code defines a CSS class named .container that sets up a flex container using the display: flex; property. The flex-flow property is then used to control the direction and wrapping behavior of the flex items within the container.

The flex-flow property is a shorthand property that combines flex-direction and flex-wrap properties. The possible values for flex-direction are row, row-reverse, column, and column-reverse. The possible values for flex-wrap are nowrap, wrap, and wrap-reverse.

In the given code, flex-flow is used to set the flex-direction and flex-wrap properties as follows:

flex-flow: row nowrap;: Sets the flex-direction to row and the flex-wrap to nowrap. This means that the flex items will be laid out in a row from left to right and will not wrap to the next line if there is not enough space.
flex-flow: row wrap;: Sets the flex-direction to row and the flex-wrap to wrap. This means that the flex items will be laid out in a row from left to right and will wrap to the next line if there is not enough space.
flex-flow: row wrap-reverse;: Sets the flex-direction to row and the flex-wrap to wrap-reverse. This means that the flex items will be laid out in a row from right to left and will wrap to the next line if there is not enough space.

The height property is then used to set the height of the container to 400px.

Finally, flex-flow is used again to set the flex-direction and flex-wrap properties for a column layout as follows:

flex-flow: row nowrap;: Sets the flex-direction to row and the flex-wrap to nowrap. This means that the flex items will be laid out in a row from left to right and will not wrap to the next line if there is not enough space.
flex-flow: row wrap;: Sets the flex-direction to row and the flex-wrap to wrap. This means that the flex items will be laid out in a row from left to right and will wrap to the next line if there is not enough space.
flex-flow: row wrap-reverse;: Sets the flex-direction to row and the flex-wrap to wrap-reverse. This means that the flex items will be laid out in a row from right to left and will wrap to the next line if there is not enough space.

Overall, the given code shows how the flex-flow property can be used to control the layout of flex items within a flex container.

Flex Flow is a powerful property that allows you to control the layout of flex items in a flexible way. By using Flex Flow, you can create complex and responsive layouts with ease.