Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Style flex Property

  • Last Updated : 31 Jul, 2019

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"

Property values:

ValueDescription
flex-growIt specify how much the item will grow relative to the rest of the flexible items
flex-shrinkIt specify how much the item will shrink relative to the rest of the flexible items
flex-basisIt specify the length of the item. Legal values: “auto”, “inherit” and number followed by “%”, “px”, “em”
autoSame as 1 1 auto
initialSame as 0 1 auto
inheritInherit the property from it’s parent element.

Example-1: Same length of all div.






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




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

Output:
Before Click on the Button:

After Click on the Button:

Supported Browsers: The browser supported by DOM Style borderCollapse property are listed below:

  • Google Chrome 1.2
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera 4.0
  • Apple Safari 1.0

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :