The HTML DOM style flexBasis property is used to specifying the initial size of an element with flex display. The flexBasis property has higher priority than width for any other value than auto for flex-basis.
Following is the syntax for −
Setting the flexBasis property −
object.style.flexBasis = "number|auto|initial|inherit"
The above properties are explained as follows −
| Value | Description |
|---|---|
| number | Forspecifying the flexible items initial length in percentage or anylegal length unit. |
| auto | Thesets the length equal to the flexible item length. If the lengthisn’t specified then it will be according to its content. Thisis the default value. |
| initial | Forsetting this property to initial value. |
| inherit | Toinherit the parent property value |
Let us look at an example for the flexBasis property −
Example
<!DOCTYPE html>
<html>
<head>
<style>
#demo, #demo2{
background-color: #fff8dc;
margin: 10px;
height: 100px;
box-shadow: 0 0 0 4px brown;
display: flex;
}
#demo div {
flex-basis: 110px;
}
</style>
<script>
function changeFlexBasis() {
for(var i=1;i<3;i++){
document.getElementsByTagName("DIV")[i].style.flexBasis="200px";
}
document.getElementById("Sample").innerHTML="The flex basis value is increased to 200px";
}
</script>
</head>
<body>
<h2>Demo Heading</h2>
<div id="demo">
<div><img src="https://www.tutorialspoint.com/images/home_tensor_flow.png"></div>
<div><img src="https://www.tutorialspoint.com/images/home_blockchain_python.png"></div>
<div><img src="https://www.tutorialspoint.com/images/multilanguage-tutorials.png"></div>
</div>
<p>Change the flex basis property for the image present inside divs by clicking the below button</p>
<button onclick="changeFlexBasis()">Change Flex Basis</button>
<p id="Sample"></p>
</body>
</html>Output
On clicking the “Change Flex Basis” button −
