flex Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:flex

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. flex

Description

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

Property Values

Value Description
flex-grow how much the item will grow relative to the rest of the flexible items
flex-shrink 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
autoSame as 1 1 auto.
initial Same as 0 1 auto.
noneSame as 0 0 auto.
inherit Inherits this property from its parent element.

Technical Details

Item Value
Default Value: 0 1 auto
Return Value: A String, representing the flex property of an element
CSS VersionCSS3

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

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#main {/*from   ww w  . j a  v  a2s. c  o  m*/
    width: 200px;
    height: 150px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
    display: flex;
    flex-wrap: wrap;
}

#main div {
    width: 50px;
    height: 50px;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:red;">C</div>
  <div style="background-color:pink;">D</div>
  <div style="background-color:blue;">E</div>
  <div style="background-color:lightgreen;">F</div>
</div>

<button onclick="myFunction()">Test</button>

<script>
function myFunction() {
    document.getElementById("main").style.WebkitFlex= "auto"; // Safari 6.1+
    document.getElementById("main").style.flex = "auto";
}
</script>

</body>
</html>

Related Tutorials