PUBLISHED ON: APRIL 3, 2021
CSS flex-direction Property
The flex-direction property in CSS asserts how the flex-items get placed in the flex container which defines the main axis and the direction whether normal or reserved.
It should be noted that the values like row-reverse or row are affected by the directionality of the flex container. If the dir attribute is ltr or row, it represents the horizontal axis which is oriented from the left to the right.
Syntax
row | row-reverse | column | column-reverse
Example 1: CSS flex-direction Property
Here in the example below, we are using the flex-direction property with different border styles, colors, and different values. In this case, we have given the flex-direction property value as row-reverse and column-reverse.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#content {
width: 100px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
flex-direction: column-reverse;
}
.box {
width: 50px;
height: 50px;
}
#content1 {
width: 100px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
flex-direction: row-reverse;
}
.box1 {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h4>This is a Column-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>
<h4>This is a Row-Reverse</h4>
<div id="content1">
<div class="box1" style="background-color:red;">A</div>
<div class="box1" style="background-color:lightblue;">B</div>
<div class="box1" style="background-color:yellow;">C</div>
</div>
</body>
</html>
Output
Example 1: CSS flex-direction Property
Here in the example below, we are using the flex-direction property with different border styles, colors and their different values. In this case, we have given the flex-direction property value as row-reverse.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#content {
width: 100px;
height: 100px;
border: 1px solid green;
display: flex;
flex-direction: row-reverse;
background-color: gray;
}
.box {
width: 50px;
height: 50px;
}
.box1 {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h4>This is a Row-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 |
20 |
20 |
| Internet Explorer |
11 |
11 |
| Opera |
12.1 |
12.1 |
| Safari |
9 |
9 |
| Webview Android |
4.4 |
4.4 |
| Chrome Android |
29 |
29 |
| Firefox Android |
20 |
20 |
| Opera Android |
12.1 |
12.1 |
| IOS Safari |
9 |
9 |
| Samsung Internet |
2.0 |
2.0 |
Conclusion
The initial value for the flex-direction property is 'row'. This property is applicable to the flex containers. It is not an inherited property. The computed value for this property is the as specified one.
