Javascript Reference - HTML DOM Style flex Property

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

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

Browser Support


`flex`	Yes	11	Yes	Yes (WebkitFlex)	Yes

Syntax

Return the flex property:

var v = object.style.flex

Set the flex property:

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

Property Values

flex-grow: A number setting how much to grow relative to the rest of the flexible items
flex-shrink: A number setting how much to shrink relative to the rest of the flexible items
flex-basis: item length . Could be "auto", "inherit", or a number followed by "%", "px", "em" or any other length unit
auto: 1 1 auto
none: 0 0 auto

Technical Details

Default Value:	0 1 auto
Return Value:	A string representing the flex property
CSS Version	CSS3

Example

The following code shows how to layout all the flexible items be the same length, regardless of its content.


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!--  w  w w  .ja  v a  2s.c  o m-->
    width: 220px;
    height: 300px;
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    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. test test</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.WebkitFlex = "1"; // Safari 6.1+
        y[i].style.flex = "1";
    }
}
</script>

</body>
</html>

The code above is rendered as follows: