The flex-flow property is a shorthand property for the flex-wrap and flex-direction properties.
The flex-flow property is a part of the Flexible Box Layout module.
If there are no flexible items, the flex-flow property won't have any effect.
| Initial Value | row nowrap |
| Applies to | Flex containers |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.flexFlow = "column nowrap"; |
Syntax
flex-flow: flex-direction | flex-wrap | initial | inherit;Example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
display: flex;
flex-wrap: nowrap;
}
.example div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>Flex-flow property example</h2>
<div class="example">
<div style="background-color: #8ebf42;">A</div>
<div style="background-color: #1c87c9;">B</div>
<div style="background-color: #ccc;">C</div>
<div style="background-color: #666;">D</div>
<div style="background-color: #4c4a4a;">E</div>
<div style="background-color: #c6c4c4;">F</div>
</div>
</body>
</html>Here, "wrap-reverse" value is used.
Example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
display: flex;
flex-flow: wrap-reverse;
}
.example div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>Flex-flow property example</h2>
<div class="example">
<div style="background-color: #8ebf42;">A</div>
<div style="background-color: #1c87c9;">B</div>
<div style="background-color: #ccc;">C</div>
<div style="background-color: #666;">D</div>
<div style="background-color: #4c4a4a;">E</div>
<div style="background-color: #c6c4c4;">F</div>
</div>
</body>
</html>Values
| Value | Description |
|---|---|
| flex-direction |
Defines the flexible items' direction.
Possible values are: row row-reverse column column-reverse initial inherit |
| flex-wrap | Defines if the flexible items should wrap or not.
Possible values are: nowrap wrap wrap-reverse initial inherit |
| initial | Makes the property use its default value. |
| inherit | Inherits the property from its parents element. |