HTML | DOM Style flex Property

Last Updated : 08 Aug, 2022

The HTML DOM Style flex property sets/returns the length of the item, relative to rest of flexible items inside the same container. The flexGrow, flexShrink, and the flexBasis are the properties of Flex property.

Syntax:

It is used to return the style flex property:

 object.style.flex

It is used to set the flex property:

object.style.flex = "flex-grow flex-shrink flex-basis|auto|
initial|inherit"

Return Values: It returns a string value, which represents the flex property of an element

Property values:

Value	Description
flex-grow	It specify how much the item will grow relative to the rest of the flexible items
flex-shrink	It specify how much the item will shrink relative to the rest of the flexible items
flex-basis	It specify the length of the item. Legal values: "auto", "inherit" and number followed by "%", "px", "em"
auto	Same as 1 1 auto
initial	Same as 0 1 auto
inherit	Inherit the property from it's parent element.

Example-1: Same length of all div.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML | DOM Style flex Property
    </title>
    <style>
        #gfg {
            width: 220px;
            height: 60px;
            border: 1px solid black;
            display: -webkit-flex;
            /* Safari */
            display: flex;
        }
    </style>
</head>

<body>
    <center>
        <h1 style="color: green;">
          GeeksforGeeks
        </h1>
      
        <h2 style="color: black;">
          DOM Style flex Property
        </h2>
      
      <div id="gfg">
         <div style="background-color:green;">Geeks
            <div style="background-color:lightblue;">For
                    <div style="background-color:green;">
                      Geeks
                    </div>
            </div>
         </div>
      </div>
        <br>
      
        <button onclick="GEEKS()">CLICK</button>
      
        <script>
            function GEEKS() {
                var x = document.getElementById("gfg");
                var y = x.getElementsByTagName("DIV");
                var i = 0;
                for (i; i < y.length; i++) {
                    // IE10
                    y[i].style.msFlex = "1"; 
                  
                    // Safari 6.1+
                    y[i].style.WebkitFlex = "1"; 
                    y[i].style.flex = "1";
                }
            }
        </script>
    </center>
</body>

</html>

Output:

Before Click on the Button:

After Click on the Button:

Example-2: Flex items according to its content:

html

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML | DOM Style flex Property
    </title>
    <style>
        #gfg {
            width: 220px;
            height: 300px;
            border: 1px solid black;
            display: -webkit-flex;
            /* Safari */
            display: flex;
        }
    </style>
</head>

<body>
    <center>
        <h1 style="color: green;">
          GeeksforGeeks
        </h1>
        <h2 style="color: black;">
          DOM Style flex Property
        </h2>
        <div id="gfg">
            <div style="background-color:green;">
              Geeks1 
          </div>
            <div style="background-color:lightblue;">
              For1
          </div>
            <div style="background-color:green;">
              GEEKS1
          </div>
        </div>
        <br>
      
        <button onclick="GEEKS()">CLICK</button>
      
        <script>
            function GEEKS() {
                var x = 
                 document.getElementById("gfg");
                var y = 
                 x.getElementsByTagName("DIV");
                var i = 0;
                for (i; i < y.length; i++) {
                    // IE10
                    y[i].style.msFlex = "0"; 
                    // Safari 6.1+
                    y[i].style.WebkitFlex = "0"; 
                    y[i].style.flex = "1 125px";
                }
            }
        </script>
    </center>
</body>

</html>