- 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 flexFlow Property
The HTML DOM Style flexFlow property is used to specify the flexDirection and flexWrap property of an element. It is a shorthand for flexDirection and flexWrap and accepts values in the same order.
Following is the syntax for −
Setting the flexFlow property −
object.style.flexFlow = "flex-direction flex-wrap|initial|inherit"
The above properties are explained as follows −
Value | Description |
---|---|
flex-direction | Itis used for specifying the flexible items direction and its valuesare row, row-reverse, column, column-reverse, initial and inherit.Its default value is row. |
flex-wrap | It is used for specifying ifthe flexible items should wrap or not. Its values are nowrap,wrap, wrap-reverse, initial, and inherit. Its default value isnowrap. |
initial | For setting this property toinitial value. |
inherit | To inherit the parentproperty value |
Let us look at an example for the flexFlow property −
Example
<!DOCTYPE html> <html> <head> <style> #demo { width: 600px; height: 190px; border:1px solid black; display: flex; flex-flow: row-reverse no-wrap; } #demo div { width:100px; height:100px; } </style> <script> function changeFlexFlow() { document.getElementById("demo").style.flexFlow="row wrap"; document.getElementById("Sample").innerHTML="The flex flow property is now set to row wrap"; } </script> </head> <body> <div id="demo"> <div><img src="https://www.tutorialspoint.com/images/css.png"></div> <div>1</div> <div><img src="https://www.tutorialspoint.com/images/Swift.png"></div> <div>2</div> <div><img src="https://www.tutorialspoint.com/images/reactjs.png"></div> <div>3</div> <div><img src="https://www.tutorialspoint.com/images/blockchain.png"></div> <div>4</div> <div><img src="https://www.tutorialspoint.com/images/3d.png"></div> <div>5</div> </div> <p>Change the above container div flex flow property by clicking the below button</p> <button onclick="changeFlexFlow()">Change Flex Flow</button> <p id="Sample"></p> </body> </html>
Output
On clicking the “Change Flex Flow” button −
Advertisements