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 −
