Skip to content
Related Articles

Related Articles

HTML | DOM Style flexGrow Property
  • Last Updated : 31 Jul, 2019

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.






<!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.




<!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:

Browser Support: The browsers supported by DOM flexGrow property are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari
My Personal Notes arrow_drop_up
Recommended Articles
Page :