The flex-basis property specifies the initial length of a flexible item.

<div class="flex_container">
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
</div>

.flex_container > div {
    flex-basis: 150px;
}

Default value	auto
Inherited values	no
Can it be animated?	yes

These are the allowed values.

Value	Description
number	A length unit/percentage specifying the initial length of the flexible item(s)
auto	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 (default)
initial	Sets this property to its default value
inherit	Inherits this property from its parent element

The HTML element can also be styled using JavaScript and the element’s id.

document.getElementById('my_div').style.flexBasis = '250px';

<button onclick='my_function()'>Click Here</button>

<script>
function my_function() {
    document.getElementById('my_div').style.flexBasis = '250px';
}
</script>

---