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>