Javascript DOM CSS Style flex Property

Introduction

Let all the flexible items be the same length, regardless of its content:

Click the button to set the flex property of ALL DIV elements inside the myDIV element:

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {//  ww  w  .ja  va2  s.c o  m
  width: 220px;
  height: 300px;
  border: 1px solid black;
  display: flex;
}
</style>
</head>
<body>
<button onclick="myFunction()">Test</button>

<div id="myDIV">
  <div style="background-color:coral;">RED</div>
  <div style="background-color:lightblue;">BLUE</div>
  <div style="background-color:lightgreen;">Green</div>
</div>

<script>
function myFunction() {
  var x = document.getElementById("myDIV");
  var y = x.getElementsByTagName("DIV");
  var i = 0;
  for (i; i < y.length; i++) {
    y[i].style.msFlex = "1"; // IE10
    y[i].style.flex = "1";
  }
}
</script>

</body>
</html>

The flex property sets or gets the length of the item, relative to the rest of the flexible items inside the same container.

The flex property is a shorthand for the flexGrow, flexShrink, and the flexBasis properties.

If the element is not a flexible item, the flex property has no effect.

Property Values

Value	Description
flex-grow	A number setting how much the item will grow relative to the rest of the flexible items
flex-shrink	A number setting how much the item will shrink relative to the rest of the flexible items
flex-basis	The length of the item. Legal values: "auto", "inherit", or a number followed by "%", "px", "em" or any other length unit
auto	Same as 1 1 auto.
initial	Same as 0 1 auto.
none	Same as 0 0 auto.
inherit	Inherits this property from its parent element.

The flex property Default Value:0 1 auto

The flex property returns a String representing the flex property of an element

Previous Next