Open In App

HTML | DOM Style flexGrow Property

Improve
Improve
Like Article
Like
Save
Share
Report

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


Last Updated : 09 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads