The flex-direction property in CSS is used to define the direction in which flex items are placed inside a flex container. It helps developers control the layout structure of elements in a flexible and responsive way.
- The main axis can be set horizontally or vertically using flex-direction.
- Common values include row, row-reverse, column, and column-reverse.
- It is a sub-property of the CSS Flexible Box Layout (Flexbox) module.
Note: The flex-direction property only works on flexible items. Without flexible items, this property has no effect.
Default Value: rowSyntax:
flex-direction: row | row-reverse | column | column-reverse;Property values:
| Value | Description |
|---|---|
row | Displays items horizontally, following the normal text flow (left to right). |
row-reverse | Reverses the order of items, arranging them from right to left. |
column | Stacks items vertically, starting from the top and moving down. |
column-reverse | Flips the vertical order, displaying items from bottom to top. |
Below is a breakdown of each value for the flex-direction property:
1 . row:
It arranges the row the same as the text direction. The default value of flex-direction is row. It is used to specify that the item has normal text direction. It makes the item follow the normal text direction in lines.
Syntax:
flex-direction: row; Example:
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>flex-direction property</title>
<!--Driver Code Ends-->
<style>
#main {
width: 400px;
height: 300px;
border: 2px solid black;
display: flex;
flex-direction: row;
}
#main div {
width: 100px;
height: 50px;
}
h1 {
color: #009900;
font-size: 42px;
margin-left: 50px;
}
h3 {
margin-top: -20px;
margin-left: 50px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>The flex-direction:row</h3>
<div id="main">
<div style="background-color:#009900;">1</div>
<div style="background-color:#00cc99;">2</div>
<div style="background-color:#0066ff;">3</div>
<div style="background-color:#66ffff;">4</div>
<div style="background-color:#660066;">5</div>
<div style="background-color:#663300;">6</div>
</div>
</body>
</html>
<!--Driver Code Ends-->
2. row-reverse:
This property is used to follow the opposite of the text direction. It makes flex items in reverse order exactly the opposite of the text direction as we can see in the Output.
Syntax:
flex-direction: row-reverse;Example:
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>flex-direction property</title>
<!--Driver Code Ends-->
<style>
#main {
width: 400px;
height: 300px;
border: 2px solid black;
display: flex;
flex-direction: row-reverse;
}
#main div {
width: 100px;
height: 50px;
}
h1 {
color: #009900;
font-size: 42px;
margin-left: 50px;
}
h3 {
margin-top: -20px;
margin-left: 50px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>The flex-direction:row-reverse</h3>
<div id="main">
<div style="background-color:#009900;">1</div>
<div style="background-color:#00cc99;">2</div>
<div style="background-color:#0066ff;">3</div>
<div style="background-color:#66ffff;">4</div>
<div style="background-color:#660066;">5</div>
<div style="background-color:#663300;">6</div>
</div>
</body>
</html>
<!--Driver Code Ends-->
3 . column:
It arranges the row as a column same as the text direction but top to bottom. It is used to specify that the item has a normal top-to-bottom direction. It makes the item follow the normal top-to-bottom direction as we can see in the Output.
Syntax:
flex-direction: column; Example:
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>flex-direction property</title>
<!--Driver Code Ends-->
<style>
#main {
width: 400px;
height: 300px;
border: 2px solid black;
display: flex;
flex-direction: column;
}
#main div {
width: 100px;
height: 50px;
}
h1 {
color: #009900;
font-size: 42px;
margin-left: 50px;
}
h3 {
margin-top: -20px;
margin-left: 50px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>The flex-direction:column</h3>
<div id="main">
<div style="background-color:#009900;">1</div>
<div style="background-color:#00cc99;">2</div>
<div style="background-color:#0066ff;">3</div>
<div style="background-color:#66ffff;">4</div>
<div style="background-color:#660066;">5</div>
<div style="background-color:#663300;">6</div>
</div>
</body>
</html>
<!--Driver Code Ends-->
4 . column-reverse:
It arranges the row as a column same as the row-reverse bottom to top. It is used to specify that the item has a normal bottom-to-top direction. It makes the item follow the normal bottom-to-top direction as we can see in the Output.
Syntax:
flex-direction: column-reverse; Example:
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>flex-direction property</title>
<!--Driver Code Ends-->
<style>
#main {
width: 400px;
height: 300px;
border: 2px solid black;
display: flex;
flex-direction: column-reverse;
}
#main div {
width: 100px;
height: 50px;
}
h1 {
color: #009900;
font-size: 42px;
margin-left: 50px;
}
h3 {
margin-top: -20px;
margin-left: 50px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>The flex-direction:column-reverse</h3>
<div id="main">
<div style="background-color:#009900;">1</div>
<div style="background-color:#00cc99;">2</div>
<div style="background-color:#0066ff;">3</div>
<div style="background-color:#66ffff;">4</div>
<div style="background-color:#660066;">5</div>
<div style="background-color:#663300;">6</div>
</div>
</body>
</html>
<!--Driver Code Ends-->