The DOM Style flexDirection property is used to set or return the main-axis direction of the flexible items.
Syntax:
- It returns the flexDirection Property
object.style.flexDirection
- It used to set the flexDirection Property
object.style.flexDirection = "row | row-reverse | column |
column-reverse | initial | inherit"
Return Values: It returns a String, represents the flex-direction property of an element
Property Values:
| Value | Description |
|---|
| row | This is used to display the flexible items horizontally as a row. |
|---|
| row-reverse | This is same as a row, but in reverse order. |
|---|
| column | This is used to display the flexible items vertically, as a column. |
|---|
| column-reverse | This is same as a column, but in reverse order. |
|---|
| initial | This is used to set this property to its default value. |
|---|
| inherit | This inherits the property from its parent. |
|---|
Example-1: Using the row value.
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style flexDirection property
</title>
<style>
.main {
width: 500px;
height: 300px;
border: 1px solid;
display: flex;
flex-direction: column;
}
.main div {
width: 100px;
height: 50px;
font-size: 2rem;
text-align: center;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
DOM Style flexDirection
</b>
<div class="main">
<div style="background-color:lightgreen;">
The
</div>
<div style="background-color:green;">
Geeks
</div>
<div style="background-color:lightgreen;">
For
</div>
<div style="background-color:green;">
Geeks
</div>
<div style="background-color:lightgreen;">
Portal
</div>
</div>
<button onclick="changeFlexDirection()">
Change flexDirection
</button>
<script>
function changeFlexDirection() {
document.querySelector(
'.main').style.flexDirection = "row";
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
Example-2: Using the row-reverse value.
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style flexDirection property
</title>
<style>
.main {
width: 500px;
height: 300px;
border: 1px solid;
display: flex;
flex-direction: column;
}
.main div {
width: 100px;
height: 50px;
font-size: 2rem;
text-align: center;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
DOM Style flexDirection
</b>
<div class="main">
<div style="background-color:lightgreen;">
The
</div>
<div style="background-color:green;">
Geeks
</div>
<div style="background-color:lightgreen;">
For
</div>
<div style="background-color:green;">
Geeks
</div>
<div style="background-color:lightgreen;">
Portal
</div>
</div>
<button onclick="changeFlexDirection()">
Change flexDirection
</button>
<script>
function changeFlexDirection() {
document.querySelector(
'.main').style.flexDirection =
"row-reverse";
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
Example-3: Using the column value.
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style flexDirection property
</title>
<style>
.main {
width: 500px;
height: 300px;
border: 1px solid;
display: flex;
}
.main div {
width: 100px;
height: 50px;
font-size: 2rem;
text-align: center;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style flexDirection</b>
<div class="main">
<div style="background-color:lightgreen;">
The
</div>
<div style="background-color:green;">
Geeks
</div>
<div style="background-color:lightgreen;">
For
</div>
<div style="background-color:green;">
Geeks
</div>
<div style="background-color:lightgreen;">
Portal
</div>
</div>
<button onclick="changeFlexDirection()">
Change flexDirection
</button>
<script>
function changeFlexDirection() {
document.querySelector(
'.main').style.flexDirection = "column";
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
Example-4: Using the column-reverse value.
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style flexDirection property
</title>
<style>
.main {
width: 500px;
height: 300px;
border: 1px solid;
display: flex;
}
.main div {
width: 100px;
height: 50px;
font-size: 2rem;
text-align: center;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
DOM Style flexDirection
</b>
<div class="main">
<div style="background-color:lightgreen;">
The
</div>
<div style="background-color:green;">
Geeks
</div>
<div style="background-color:lightgreen;">
For
</div>
<div style="background-color:green;">
Geeks
</div>
<div style="background-color:lightgreen;">
Portal
</div>
</div>
<button onclick="changeFlexDirection()">
Change flexDirection
</button>
<script>
function changeFlexDirection() {
document.querySelector(
'.main').style.flexDirection =
"column-reverse";
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
Example-5: Using the initial value.
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style flexDirection property
</title>
<style>
.main {
width: 500px;
height: 300px;
border: 1px solid;
display: flex;
flex-direction: column;
}
.main div {
width: 100px;
height: 50px;
font-size: 2rem;
text-align: center;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
DOM Style flexDirection
</b>
<div class="main">
<div style="background-color:lightgreen;">
The
</div>
<div style="background-color:green;">
Geeks
</div>
<div style="background-color:lightgreen;">
For
</div>
<div style="background-color:green;">
Geeks
</div>
<div style="background-color:lightgreen;">
Portal
</div>
</div>
<button onclick="changeFlexDirection()">
Change flexDirection
</button>
<script>
function changeFlexDirection() {
document.querySelector(
'.main').style.flexDirection =
"initial";
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
Example-6: Using the inherit value.
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style flexDirection property
</title>
<style>
#parent {
flex-direction: column-reverse;
}
.main {
width: 500px;
height: 300px;
border: 1px solid;
display: flex;
}
.main div {
width: 100px;
height: 50px;
font-size: 2rem;
text-align: center;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
DOM Style flexDirection
</b>
<div id="parent">
<div class="main">
<div style=
"background-color:lightgreen;">The</div>
<div style=
"background-color:green;">Geeks</div>
<div style=
"background-color:lightgreen;">For</div>
<div style=
"background-color:green;">Geeks</div>
<div style=
"background-color:lightgreen;">Portal</div>
</div>
</div>
<button onclick="changeFlexDirection()">
Change flexDirection
</button>
<script>
function changeFlexDirection() {
document.querySelector(
'.main').style.flexDirection =
"inherit";
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
Supported Browsers: The browser supported by flexDirection property are listed below:
- Google Chrome 29 and above
- Edge 12 and above
- Internet Explorer 11.0 and above
- Firefox 81 and above
- Opera 12.1 and above
- Apple Safari 9 and above