Aquileo | HTML | DOM Style flexGrow Property

The HTML DOM style flexGrow property is used as a measure to determine how much an item will grow relative to the rest of the flexible items inside the same container.

Syntax:

Return flexGrow property:

object.style.flexGrow

Set flexGrow property:

object.style.flexGrow = "number|initial|inherit"

Properties:

number: It specifies the quantity in number which determines how much the item will grow relative to the rest of the flexible items.
initial: It sets the flexGrow property to its default value.
inherit: It inherits the property values from its parent element.

Return Value: It returns a string, representing the flex-grow property of the element.

Example-1: Item grow relative to the rest of the flexible items inside the same container.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
       HTML | DOM Style flexGrow Property
    </title>
    <style>
        #main {
            width: 550px;
            height: 70px;
            border: 1px solid #c3c3c3;
            display: -webkit-flex;
            display: flex;
        }
        
        #main div:nth-of-type(1) {
            -webkit-flex-grow: 1;
        }
        
        #main div:nth-of-type(2) {
            -webkit-flex-grow: 1;
        }
        
        #main div:nth-of-type(1) {
            flex-grow: 1;
        }
        
        #main div:nth-of-type(2) {
            flex-grow: 1;
        }
    </style>
</head>
<body>
    <h1>
      <center>
        Geeks <button onclick="flex()">Press
        </button>
      </center> 
    </h1>

    <h4>
      Clicking on the 'Press' button 
      will showcase the'FlexGrow Property'.
    </h4>
    <div id="main">
        <div style="background-color:white;">
      </div>
        <div style="background-color:green;"
             id="gfg">
      </div>
    </div>

    <script>
        function flex() {

            // Access element and grow the item
            document.getElementById(
              "gfg").style.flexGrow = 
              "1000";
        }
    </script>

</body>

</html>

Output:

Before clicking on the button:

After clicking on the button:

Example 2: Item grow when "nth-of-type" is 4.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
       HTML | DOM Style flexGrow Property
    </title>
    <style>
        #main {
            width: 550px;
            height: 70px;
            border: 1px solid #c3c3c3;
            display: -webkit-flex;
            display: flex;
        }
        
      
        <!-- SAFARI -->
        #main div:nth-of-type(1) {
            -webkit-flex-grow: 1;
        }
        
        #main div:nth-of-type(2) {
            -webkit-flex-grow: 1;
        }
        
        #main div:nth-of-type(3) {
            -webkit-flex-grow: 1;
        }
        
        #main div:nth-of-type(4) {
            -webkit-flex-grow: 1;
        }
        <!-- Chrome, Firefox, Opera, Edge -->  
        #main div:nth-of-type(1) {
            flex-grow: 1;
        }
        
        #main div:nth-of-type(2) {
            flex-grow: 1;
        }
        
        #main div:nth-of-type(3) {
            flex-grow: 1;
        }
        
        #main div:nth-of-type(4) {
            flex-grow: 1;
        }
    </style>
</head>
<body>
    <h1>
      <center>
        Geeks <button onclick="flex()">Press
        </button>
      </center> 
    </h1>

    <h4>
     Clicking on the 'Press' button
     will showcase the'FlexGrow Property'.
    </h4>
    <div id="main">
        <div style="background-color:white;"></div>
        <div style="background-color:green;" id="gfg"></div>
        <div style="background-color:white;"></div>
        <div style="background-color:green;" id="gfgg"></div>
    </div>

    <script>
        function flex() {
          
            // SAFARI.
            document.getElementById(
              "gfg").style.WebkitFlexGrow = "8";
            document.getElementById(
              "gfg").style.flexGrow = "8";
          
            //  OTHERS.
            document.getElementById(
              "gfgg").style.WebkitFlexGrow = "8";
            document.getElementById(
              "gfgg").style.flexGrow = "8";
        }
    </script>

</body>

</html>

Output:

Before clicking on the button:

After clicking on the button:

Supported Browsers: The browsers supported by DOM flexGrow property are listed below:

Google Chrome 29 and above
Edge 12 and above
Internet Explorer 11 and above
Firefox 20 and above
Opera 12.1 and above
Safari 9 and above

HTML | DOM Style flexGrow Property

Explore