The HTML DOM Style flex property is used for setting or returning the flexible length for elements with display property set to flex. It is used to manipulate properties flexGrow, flexShrink and flexBasis.
Following is the syntax for −
Setting the flex property −
object.style.flex = "flex-grow flex-shrink flex-basis|auto|initial|inherit"
Following are the values −
| Value | Description |
|---|---|
| flex-grow | Itgrows the item relative to the rest of the flexible item by agiven number. |
| flex-shrink | Itshrinks the item relative to the rest of the flexible items by agiven number. Anumber specifying how much the item will shrink relative to therest of the flexible items |
| flex-basis | Forspecifiying the item length and takes any legal length unit. |
| auto | Setsthe three flex properties as 1 1 auto. |
| initial | Setsthe flex property to default value which is 0 1 auto. |
| none | Sameas 0 0 auto. |
| inherit | Toinherit the parent property value |
Let us look at an example for the flex property −
Example
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
width: 400px;
height: 80px;
display: flex;
}
#demo div {
flex: 1 3 auto;
}
div:nth-of-type(even){
box-shadow: inset 0 0 12px red;
}
div:nth-of-type(odd){
box-shadow: inset 0 0 12px blue;
}
</style>
<script>
function changeFlex() {
document.getElementsByTagName("DIV")[1].style.flex="none";
document.getElementsByTagName("DIV")[4].style.flex="none";
document.getElementById("Sample").innerHTML="The flex value for first and fourth div is changed to none";
}
</script>
</head>
<body>
<div id="demo">
<div id="orange"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="red"></div>
</div>
<p>Change the above divs flex property by clicking the below button</p>
<button onclick="changeFlex()">Change Flex</button>
<p id="Sample"></p>
</body>
</html>Output
On clicking the “Change Flex” −
