HTML | DOM Style flexDirection Property
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"> w3wiki </ h1 > < b > DOM Style flexDirection </ b > < div class="main"> < div style="background-color:lightgreen;"> The </ div > < div style="background-color:green;"> Beginner </ div > < div style="background-color:lightgreen;"> For </ div > < div style="background-color:green;"> Beginner </ 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"> w3wiki </ h1 > < b > DOM Style flexDirection </ b > < div class="main"> < div style="background-color:lightgreen;"> The </ div > < div style="background-color:green;"> Beginner </ div > < div style="background-color:lightgreen;"> For </ div > < div style="background-color:green;"> Beginner </ 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">w3wiki</ h1 > < b >DOM Style flexDirection</ b > < div class="main"> < div style="background-color:lightgreen;"> The </ div > < div style="background-color:green;"> Beginner </ div > < div style="background-color:lightgreen;"> For </ div > < div style="background-color:green;"> Beginner </ 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"> w3wiki </ h1 > < b > DOM Style flexDirection </ b > < div class="main"> < div style="background-color:lightgreen;"> The </ div > < div style="background-color:green;"> Beginner </ div > < div style="background-color:lightgreen;"> For </ div > < div style="background-color:green;"> Beginner </ 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"> w3wiki </ h1 > < b > DOM Style flexDirection </ b > < div class="main"> < div style="background-color:lightgreen;"> The </ div > < div style="background-color:green;"> Beginner </ div > < div style="background-color:lightgreen;"> For </ div > < div style="background-color:green;"> Beginner </ 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"> w3wiki </ h1 > < b > DOM Style flexDirection </ b > < div id="parent"> < div class="main"> < div style= "background-color:lightgreen;">The</ div > < div style= "background-color:green;">Beginner</ div > < div style= "background-color:lightgreen;">For</ div > < div style= "background-color:green;">Beginner</ 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
Contact Us