flexBasis Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:flexBasis

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

Description

The flexBasis property sets the initial length of a flexible item.

Property Values

Value Description
number A length unit, or percentage
autoDefault value. The length is equal to the length of the flexible item.
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

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

Set the initial length of a flex-item to 200 pixels:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#main {//from  w  w  w  .  j  a v  a2 s  .c o  m
    width: 350px;
    height: 100px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    display: flex;
}

#main div {
    -webkit-flex-grow: 0; /* Safari 6.1+ */
    -webkit-flex-shrink: 0; /* Safari 6.1+ */
    -webkit-flex-basis: 40px; /* Safari 6.1+ */
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 40px;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">Red DIV</div>
  <div style="background-color:lightblue;" id="myBlueDiv">Blue DIV</div>
</div>

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

<script>
function myFunction() {
    document.getElementById("myBlueDiv").style.WebkitFlexBasis = "200px"; // Safari 6.1+
    document.getElementById("myBlueDiv").style.flexBasis = "200px";
}
</script>

</body>
</html>

Related Tutorials