HTML | DOM Style flex Property

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:

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

Before Click on the Button:

After Click on the Button:

Example-2: Flex items according to its content:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.