PUBLISHED ON: APRIL 3, 2021
CSS flex-flow Property
The flex-flow property in CSS is a shorthand property that specifies the direction of a particular flex container and its wrapping behavior as well. This property is a shorthand property for CSS properties like the flex-direction and flex-wrap.
Syntax
<'flex-direction'> || <'flex-wrap'>
Example 1: CSS flex-flow Property
Here in the example below, we are using the flex-flow property with different border styles, colors, and different values. In this case, we have given the flex-flow property value as column-reverse-wrap.
<!DOCTYPE html>
<html>
<head>
<title>The flex-flow property in CSS</title>
<style type="text/css">
#content {
width: 100px;
height: 100px;
border: 1px solid green;
display: flex;
flex-flow: column-reverse-wrap;
background-color: pink;
}
.box {
width: 50px;
height: 50px;
}
.box1 {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h4>This is a column-Reverse-wrap</h4>
<div id="content">
<div class="box" style="background-color:red;">A</div>
<div class="box" style="background-color:lightblue;">B</div>
<div class="box" style="background-color:yellow;">C</div>
</div>
</body>
</html>
Output
Example 2: CSS flex-flow Property
In the example below, we are using the flex-flow property with different border styles, colors, and different values. In this case, we have given the flex-flow property value as wrap-reverse. You have the choice to give any title to your program and you can also indent your text and object according to your selection of colors or styles or variants, etc.
<!DOCTYPE html>
<html>
<head>
<title>The flex-flow property in CSS</title>
<style type="text/css">
#content {
width: 100px;
height: 100px;
border: 1px solid green;
display: flex;
flex-flow: wrap-reverse;
background-color: pink;
}
.box {
width: 50px;
height: 50px;
}
.box1 {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h4>This is a wrap-reverse</h4>
<div id="content">
<div class="box" style="background-color:red;">A</div>
<div class="box" style="background-color:lightblue;">B</div>
<div class="box" style="background-color:yellow;">C</div>
</div>
</body>
</html>
Output
Live Example
Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.
Browser Compatibility
The term 'browser compatibility' indicates the ability of a particular website to appear fully functional on several browsers, available in the market. This means that the HTML coding of the website and the scripts on that website must be compatible to run on the browsers. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
29 |
29 |
| Edge |
12 |
12 |
| Firefox |
28 |
28 |
| Internet Explorer |
11 |
11 |
| Opera |
12.1 |
12.1 |
| Safari |
9 |
9 |
| Webview Android |
4.4 |
4.4 |
| Chrome Android |
29 |
29 |
| Firefox Android |
28 |
28 |
| Opera Android |
12.1 |
12.1 |
| IOS Safari |
9 |
9 |
| Samsung Internet |
2.0 |
2.0 |
Conclusion
The initial value for the flex-direction is 'row', for the flex-wrap is 'nowrap'. This property is applicable to the flex containers. It is not an inherited property. The computed value for all the constituent properties of flex-flow is the as specified one.
