Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Style flexDirection Property
The HTML DOM Style flexDirection property is used to set or return the direction of placement of flex elements.
Following is the syntax for −
Setting the flexDirection property −
object.style.flexDirection = "row|row-reverse|column|column-reverse|initial|inherit"
The above properties are explained as follows −
| Value | Description |
|---|---|
| row | Thisdisplays the flex items as row horizontally and is the defaultvalue. |
| row-reverse | Thisdisplays the flex items horizontally but in reverse order of row. |
| column | Displaysthe flex items as a column, vertically. |
| column-reverse | Thisdisplays the flex items vertically but in reverse order of column. |
| initial | Forsetting this property to initial value. |
| inherit | Toinherit the parent property value |
Let us look at an example for the flexDirection property −
Example
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
box-shadow: 0 0 0 3px #a323c3;
display: flex;
flex-direction: column-reverse;
}
#demo div {
margin: auto;
border: thin solid green;
}
</style>
<script>
function changeFlexDirection() {
document.getElementById("demo").style.flexDirection="row-reverse";
document.getElementById("Sample").innerHTML="The flex direction for the container div is changed to row-reverse";
}
</script>
</head>
<body>
<div id="demo">
<div>1 <img src="https://www.tutorialspoint.com/images/3d.png"></div>
<div>2 <img src="https://www.tutorialspoint.com/images/blockchain.png"></div>
<div>3 <img src="https://www.tutorialspoint.com/images/css.png"></div>
<div>4 <img src="https://www.tutorialspoint.com/images/reactjs.png"></div>
</div>
<p>Change the above container div flex direction by clicking the below button</p>
<button onclick="changeFlexDirection()">Change Flex Direction</button>
<p id="Sample"></p>
</body>
</html>Output
On clicking the “Change Flex Direction” button −
Updated on: 23-Oct-2019
162 Views
Advertisements