HTML - DOM Style Object flex Property

Quiz

HTML DOM Style Object flex property sets or returns length of items relative to rest of flexible items inside the same container. This property does not show any effect if element is not a flexible item. It is a shorthand property for flexGrow, flexShrink, and flexBasis.

Syntax

Set the flex property:

object.style.flex= "flex-grow | flex-shrink | flex-basis | auto | initial | inherit";

Get the flex property:

object.style.flex;

Property Values

Value	Description
flex-grow	It specifies growth of the item relative to the rest of flexible items.
flex-shrink	It specifies how much item will shrink relative to the rest of flexible items.
flex-basis	It specifies length of the item. It's legal values include auto, inherit or a number followed by px, %, em or any other CSS length unit.
auto	It sets the value to 1 1 auto
initial	It sets the value to 0 1 auto.
inherit	It is used to inherit the property of it's parent element.

Return Value

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

Example of HTML DOM Style Object 'flex' Property

The following example sets equal length for each flexible items.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #flex {
            width: 220px;
            height: 60px;
            border: 1px solid black;
            display: flex;
        }
    </style>
    <title>
        HTML DOM Style Object flex Property
    </title>
</head>
<body>
    <p>Click to apply flex property.</p>
    <button onclick="fun()">Apply</button>
    <br>
    <br>
    <div id="flex">
        <div style="background-color: #04af2f;">Hello</div>
        <div style="background-color: aqua;">Random</div>
        <div style="background-color: yellow;">Text</div>
    </div>
    <script>
        function fun() {
            let x=document.getElementById("flex");
            let y=x.getElementsByTagName("div");
            let i=0
            for(i; i<y.length;i++){
                y[i].style.flex = "1";
            }
        }
    </script>
</body>
</html>

Supported Browsers

Property
flex	Yes 29	Yes 12	Yes 20	Yes 9	Yes 12.1

html_dom.htm

Print Page