HTML DOM Style flex Property

HTML Web Development Front End Technology

The HTML DOM Style flex property is used for setting or returning the flexible length for elements with display property set to flex. It is used to manipulate properties flexGrow, flexShrink and flexBasis.

Following is the syntax for −

Setting the flex property −

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

Following are the values −

Value	Description
flex-grow	Itgrows the item relative to the rest of the flexible item by agiven number.
flex-shrink	Itshrinks the item relative to the rest of the flexible items by agiven number. Anumber specifying how much the item will shrink relative to therest of the flexible items
flex-basis	Forspecifiying the item length and takes any legal length unit.
auto	Setsthe three flex properties as 1 1 auto.
initial	Setsthe flex property to default value which is 0 1 auto.
none	Sameas 0 0 auto.
inherit	Toinherit the parent property value

Let us look at an example for the flex property −

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
   #demo {
      width: 400px;
      height: 80px;
      display: flex;
   }
   #demo div {
      flex: 1 3 auto;
   }
   div:nth-of-type(even){
      box-shadow: inset 0 0 12px red;
   }
   div:nth-of-type(odd){
      box-shadow: inset 0 0 12px blue;
   }
</style>
<script>
   function changeFlex() {
      document.getElementsByTagName("DIV")[1].style.flex="none";
      document.getElementsByTagName("DIV")[4].style.flex="none";
      document.getElementById("Sample").innerHTML="The flex value for first and fourth div is changed to none";
   }
</script>
</head>
<body>
   <div id="demo">
      <div id="orange"></div>
      <div id="green"></div>
      <div id="blue"></div>
      <div id="red"></div>
   </div>
   <p>Change the above divs flex property by clicking the below button</p>
   <button onclick="changeFlex()">Change Flex</button>
   <p id="Sample"></p>
</body>
</html>

Output

On clicking the “Change Flex” −

AmitDiwan

Updated on: 23-Oct-2019

121 Views

Kickstart Your Career

Get certified by completing the course

Get Started