HTML - DOM Style Object flexBasis Property

Quiz

HTML DOM Style Object flexBasis property sets or returns initial length of flexible item. The flexBasis property has higher priority than width except when flexBasis is set to auto.

Syntax

Set the flexBasis property:

object.style.flexBasis= "number | auto | initial | inherit";

Get the property:

object.style.flexBasis;

Property Values

Value	Description
number	It specifies initial length of flexible items.
auto	It is the default value which specifies length according to length of flexible item. If length of item is not specified then length will be according to content.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents flex basis property of an element.

Example of HTML DOM Style Object 'flexBasis' Property

The following example sets the flexBasis property for div element named Random.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #flex {
            width: 500px;
            height: 60px;
            border: 1px solid black;
            display: flex;
        }
        #flex div{
            flex-grow: 0;
            flex-shrink: 0;
            flex-basis: 40px;
        }
    </style>
    <title>
        HTML DOM Style Object flexBasis Property
    </title>
</head>
<body>
    <p>Click to apply flexBasis property.</p>
    <button onclick="fun()">Apply</button>
    <br>
    <br>
    <div id="flex">
        <div style="background-color: #04af2f;">Hello</div>
        <div style="background-color: aqua;" id="id1">Random</div>
        <div style="background-color: yellow;">Text</div>
    </div>
    <script>
        function fun() {
            document.getElementById("id1")
                .style.flexBasis="100px"
        }
    </script>
</body>
</html>

Supported Browsers

Property
flexBasis	Yes 29	Yes 12	Yes 22	Yes 9	Yes 12.1

html_dom.htm

Print Page