CSS flex-flow property

This CSS property is shorthand for flex-direction and flex-wrap properties. It only works on the flex-items, so if the container's item is not a flex-item, the flex-flow property will not affect the corresponding item.

Syntax

The default value of the flex-flow property is row nowrap which is the concatenation of the default values of flex-direction (i.e. row) and flex-wrap (i.e. nowrap) properties.

The possible values of this CSS property are tabulated as follows:

Values	Description
flex-direction	The flex-direction property is used to set the direction of the flexible items inside the flex container. Its default value is row (left-to-right, top-to-bottom). The possible values of this property are row, row-reverse, column, and column-reverse.
flex-wrap	The flex-wrap property specifies if the flex-items should wrap or not, in case of not enough space for them on one flex line. Its default value is nowrap. The possible values of this property are nowrap, wrap, and wrap-reverse.
initial	It sets the property to its default value.
inherit	It inherits the property from its parent element.

Example

Here, we are using the wrap value of the flex-wrap property and all the possible values of the flex-direction property that are row, row-reverse, column, and column-reverse.

In the first container we apply the flex-flow: row nowrap; to the flex-items, in the second container we apply the flex-flow: row-reverse nowrap; to the flex-items, in the third container we apply the flex-flow: column nowrap; to the flex-items, and in the fourth container we apply the flex-flow: column-reverse nowrap; to the flex-items.

<!DOCTYPE html>
<html>
<head>
<title>flex-flow property</title>
<style>
.mainrow{
width: 400px;
height: 50px;
border: 5px solid red;
}
.maincol{
width: 100px;
height: 200px;
border: 5px solid red;
}
#row {
flex-flow: row nowrap;
}
#rowrev {
flex-flow: row-reverse nowrap;
}
#col {
flex-flow: column nowrap;
}
#colrev {
flex-flow: column-reverse nowrap;
}
div {
width: 100px;
height: 50px;
display: flex;
font-size: 20px;
}

</style>
</head>

<body>
<center>
<h2>  flex-flow: row nowrap;</h2>
<div id= "row" class = "mainrow">
<div style="background-color: lightblue;"> 1 </div>
<div style="background-color: pink;"> 2 </div>
<div style="background-color: lightgreen"> 3 </div>
<div style="background-color: yellow;"> 4 </div>
</div>
<h2>  flex-flow: row-reverse nowrap;</h2>
<div id= "rowrev" class = "mainrow" >
<div style="background-color: lightblue;"> 1 </div>
<div style="background-color: pink;"> 2 </div>
<div style="background-color: lightgreen"> 3 </div>
<div style="background-color: yellow;"> 4 </div>
</div>
<h2>  flex-flow: column nowrap;</h2>
<div id="col" class = "maincol">
<div style="background-color: lightblue;"> 1 </div>
<div style="background-color: pink;"> 2 </div>
<div style="background-color: lightgreen"> 3 </div>
<div style="background-color: yellow;"> 4 </div>
</div>
<h2>  flex-flow: column-reverse nowrap;</h2>
<div id="colrev" class = "maincol">
<div style="background-color: lightblue;"> 1 </div>
<div style="background-color: pink;"> 2 </div>
<div style="background-color: lightgreen"> 3 </div>
<div style="background-color: yellow;"> 4 </div>
</div>
</center>
</body>
</html>

Test it Now

Output

Example

Similarly to the above example, here we are using the wrap value of the flex-wrap property and all the possible values of the flex-direction property that are row, row-reverse, column, and column-reverse.

In the first container we apply the flex-flow: row wrap; to the flex-items, in the second container we apply the flex-flow: row-reverse wrap; to the flex-items, in the third container we apply the flex-flow: column wrap; to the flex-items, and in the fourth container we apply the flex-flow: column-reverse wrap; to the flex-items.

<!DOCTYPE html>
<html>
<head>
<title>flex-flow property</title>
<style>
.mainrow{
width: 200px;
height: 100px;
border: 5px solid red;
}
.maincol{
width: 200px;
height: 150px;
text-align: left;
border: 5px solid red;
}
#row {
flex-flow: row wrap;
}
#rowrev {
flex-flow: row-reverse wrap;
}
#col {
flex-flow: column wrap;
}
#colrev {
flex-flow: column-reverse wrap;
}
div {
width: 100px;
height: 50px;
display: flex;
font-size: 20px;
font-weight: bold;
}

</style>
</head>

<body>
<center>
<h2>  flex-flow: row wrap;</h2>
<div id= "row" class = "mainrow">
<div style="background-color: lightblue;"> 1 </div>
<div style="background-color: pink;"> 2 </div>
<div style="background-color: lightgreen"> 3 </div>
<div style="background-color: yellow;"> 4 </div>
</div>
<h2>  flex-flow: row-reverse wrap;</h2>
<div id= "rowrev" class = "mainrow" >
<div style="background-color: lightblue;"> 1 </div>
<div style="background-color: pink;"> 2 </div>
<div style="background-color: lightgreen"> 3 </div>
<div style="background-color: yellow;"> 4 </div>
</div>
<h2>  flex-flow: column wrap;</h2>
<div id="col" class = "maincol">
<div style="background-color: lightblue;"> 1 </div>
<div style="background-color: pink;"> 2 </div>
<div style="background-color: lightgreen"> 3 </div>
<div style="background-color: yellow;"> 4 </div>
</div>
<h2>  flex-flow: column-reverse wrap;</h2>
<div id="colrev" class = "maincol">
<div style="background-color: lightblue;"> 1 </div>
<div style="background-color: pink;"> 2 </div>
<div style="background-color: lightgreen"> 3 </div>
<div style="background-color: yellow;"> 4 </div>
</div>
</center>
</body>
</html>

Test it Now

Output

Example

Here we are using the wrap-reverse value of the flex-wrap property and all the possible values of the flex-direction property that are row, row-reverse, column, and column-reverse.

<!DOCTYPE html>
<html>
<head>
<title>flex-flow property</title>
<style>
.mainrow{
width: 200px;
height: 100px;
border: 5px solid red;
}
.maincol{
width: 200px;
height: 150px;
text-align: left;
border: 5px solid red;
}
#row {
flex-flow: row wrap-reverse;
}
#rowrev {
flex-flow: row-reverse wrap-reverse;
}
#col {
flex-flow: column wrap-reverse;
}
#colrev {
flex-flow: column-reverse wrap-reverse;
}
div {
width: 100px;
height: 50px;
display: flex;
font-size: 20px;
font-weight: bold;
}

</style>
</head>

<body>
<center>
<h2>  flex-flow: row wrap-reverse;</h2>
<div id= "row" class = "mainrow">
<div style="background-color: lightblue;"> 1 </div>
<div style="background-color: pink;"> 2 </div>
<div style="background-color: lightgreen"> 3 </div>
<div style="background-color: yellow;"> 4 </div>
</div>
<h2>  flex-flow: row-reverse wrap-reverse;</h2>
<div id= "rowrev" class = "mainrow" >
<div style="background-color: lightblue;"> 1 </div>
<div style="background-color: pink;"> 2 </div>
<div style="background-color: lightgreen"> 3 </div>
<div style="background-color: yellow;"> 4 </div>
</div>
<h2>  flex-flow: column wrap-reverse;</h2>
<div id="col" class = "maincol">
<div style="background-color: lightblue;"> 1 </div>
<div style="background-color: pink;"> 2 </div>
<div style="background-color: lightgreen"> 3 </div>
<div style="background-color: yellow;"> 4 </div>
</div>
<h2>  flex-flow: column-reverse wrap-reverse;</h2>
<div id="colrev" class = "maincol">
<div style="background-color: lightblue;"> 1 </div>
<div style="background-color: pink;"> 2 </div>
<div style="background-color: lightgreen"> 3 </div>
<div style="background-color: yellow;"> 4 </div>
</div>
</center>
</body>
</html>

Test it Now

Output