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.

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

Recommended Posts: