Javascript DOM CSS Style flexBasis Property

Introduction

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

document.getElementById("myBlueDiv").style.flexBasis = "200px";

Click the button to set the value of the flexBasis property to "200px" for the blue div element.

View in separate window

<!DOCTYPE html>
<html>
<head>
<style>
#main {//  w  ww .  j a v a  2  s. c om
  width: 350px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
}

#main div {
  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.flexBasis = "200px";
}
</script>

</body>
</html>

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

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

Property Values

Value	Description
number	A length unit, or percentage, setting the initial length of the flexible item(s)
auto	`Default`. The length is equal to the length of the flexible item. If the item has no length specified, the length will be according to its content
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

The flexBasis property returns a String representing the flex-basis property of an element.

Previous Next