HTML - DOM Style Object flexGrow Property

Quiz

HTML DOM Style Object flexGrow property specifies growth of an item relative to the rest of flexible items inside the same container.

Syntax

Set the flexGrow property:

object.style.flexGrow= "number | initial | inherit";

Get the flexGrow property:

object.style.flexGrow;

Property Values

Value	Description
number	It specifies the growth of the item relative to rest of flexible items. It's default value is 0.
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 grow property of an element.

Example of HTML DOM Style Object 'flexGrow' Property

The following example makes div element named Random grow twice relative to other items.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #flex {
            width: 500px;
            height: 60px;
            border: 1px solid black;
            display: flex;
        }
        #flex div:nth-of-type(1) {
            flex-grow: 1;
        }
        #flex div:nth-of-type(2) {
            flex-grow: 1;
        }
        #flex div:nth-of-type(3) {
            flex-grow: 1;
        }
    </style>
    <title>
        HTML DOM Style Object flexGrow Property
    </title>
</head>
<body>
    <p>Click to apply flexGrow 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.flexGrow = "2"
        }
    </script>
</body>
</html>

Supported Browsers

Property
flexGrow	Yes 29	Yes 12	Yes 20	Yes 9	Yes 12.1

html_dom.htm

Print Page