The flex-flow property is a shorthand property for the flex-wrap and flex-direction properties.
Let us you remind that if there are no flexible items, flex-flow property won't have any effect.
CSS Syntax
flex-flow: flex-direction flex-wrap | initial | inherit;
Let's see an example:
You will see an example with row and wrap-reverse values in the first example.
<!DOCTYPE html>
<html>
<head>
<style>
#color-container {
width: 200px;
height: 200px;
padding-left:0;
list-style-type:none;
border: 1px solid #c3c3c3;
display: -webkit-flex;
-webkit-flex-flow: row-reverse wrap;
display: flex;
flex-flow: row wrap-reverse;
}
#color-container li {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<ul id="color-container">
<li style="background-color:red;">A</li>
<li style="background-color:yellow;">B</li>
<li style="background-color:orange;">C</li>
<li style="background-color:pink;">D</li>
<li style="background-color:lightgreen;">E</li>
<li style="background-color:purple;">F</li>
</ul>
</body>
</html>
Here is the result:
Let's see another example:
This is the second example of flex-flow which you will see that we used row-reverse and nowrap values.
<!DOCTYPE html>
<html>
<head>
<style>
#color-container {
width: 200px;
height: 200px;
padding-left:0;
list-style-type:none;
border: 1px solid #c3c3c3;
display: -webkit-flex;
-webkit-flex-flow: row-reverse wrap;
display: flex;
flex-flow: row-reverse nowrap;
}
#color-container li{
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<ul id="color-container">
<li style="background-color:red;">A</li>
<li style="background-color:yellow;">B</li>
<li style="background-color:orange;">C</li>
<li style="background-color:pink;">D</li>
<li style="background-color:lightgreen;">E</li>
<li style="background-color:purple;">F</li>
</ul>
</body>
</html>
Here is the result:
Property Values
Value | Descriptions |
---|---|
flex-direction | It defines the flexible items' direction. Possible values: row row-reverse column column-reverse initial inherit |
flex-wrap | It defines the flexible items should wrap or not. Possible values: nowrap wrap wrap-reverse initial inherit |
initial | It makes the property use its default value. |
inherit | It inherits the property from its parents element. |