Set how much the item will grow relative to the rest of JavaScript.
Use the flexGrow property to set how much the item will grow relative to the rest with JavaScript.
Example
You can try to run the following code to learn how to work with flexGrow property −
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: 1px solid #000000;
width: 250px;
height: 150px;
display: flex;
flex-flow: row wrap;
}
#box div {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 20px;
}
</style>
</head>
<body>
<div id = "box">
<div style = "background-color:orange;">DIV1</div>
<div style = "background-color:blue;">DIV2</div>
<div style = "background-color:yellow;" id="myID">DIV3</div>
</div>
<p>Using flexGrow property</p>
<button onclick = "display()">Set</button>
<script>
function display() {
document.getElementById("myID").style.flexGrow = "2";
}
</script>
</body>
</html>
Published on 27-Feb-2018 16:44:48
