This CSS attribute serves as an abbreviation for the flex-direction and flex-wrap attributes. It exclusively applies to flex-items, meaning that if the item within the container is not a flex-item, the flex-flow attribute will have no impact on that particular item.
Syntax
flex-flow: flex-direction flex-wrap | initial | inherit;
The flex-flow property's default value, "row nowrap," is a combination of the default settings for flex-direction (specifically, "row") and flex-wrap (specifically, "nowrap") properties.
The potential options for this CSS attribute are presented in the table below:
| 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 isrow(left-to-right, top-to-bottom). The possible values of this property arerow, row-reverse, column, andcolumn-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 isnowrap. The possible values of this property arenowrap, wrap, andwrap-reverse. |
| initial | It sets the property to its default value. |
| inherit | It inherits the property from its parent element. |
Example
Here, we are employing the wrap setting of the flex-wrap attribute along with all available options for the flex-direction property which include row, row-reverse, column, and column-reverse.
In the initial container, we implement flex-flow: row nowrap; for the flex items. In the subsequent container, flex-flow: row-reverse nowrap; is applied to the flex items. Moving on to the third container, flex-flow: column nowrap; is set for the flex items. Lastly, in the fourth container, flex-flow: column-reverse nowrap; is assigned 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>
Output
Example
Similarly to the previous example, we are leveraging the wrap setting of the flex-wrap attribute, along with the complete array of options for the flex-direction attribute, which encompass row, row-reverse, column, and column-reverse.
In the initial container, we set the flex-items to flex-flow: row wrap;. In the subsequent container, the flex-items are styled with flex-flow: row-reverse wrap;. Moving on to the third container, flex-flow: column wrap; is applied to the flex-items. Finally, in the fourth container, flex-flow: column-reverse wrap; is used for 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>
Output
Example
Here we are employing the wrap-reverse setting of the flex-wrap attribute along with all the available options for the flex-direction attribute such as 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>
Output