Set how much the item will grow relative to the rest of JavaScript.

Javascript Object Oriented Programming Front End Technology

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>

Priya Pallavi

Published on 27-Feb-2018 12:14:48

Previous Page Print Page Next Page