HTML - DOM Style Object flexFlow Property

Quiz

HTML DOM Style Object flexFlow property is a shorthand property for the flexDirection and the flexWrap where flexDirection specifies the direction of the flexible items and flexWrap specifies whether the flexible items should wrap or not.

Syntax

Set the flexFlow property:

object.style.flexFlow= "flex-direction | flex-wrap | initial | inherit";

Get the flexFlow property:

object.style.flexFlow;

Property Values

Value	Description
flex-direction	It specifies the direction of flexible items. It's default value is row.
flex-wrap	It specifies whether flexible items should wrap or not. It's default value is nowrap.
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 flow property of an element.

Examples of HTML DOM Style Object 'flexFlow' Property

The following examples illustrates flexFlow property values.

Set flexflow Value to 'column nowrap' and 'column wrap'

The following example sets the flex items to column nowrap that is flex direction is column and it will not wrap, and column wrap that is flex direction is column and it will wrap.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #flex {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            display: flex;
        }
        #flex div {
            height: 80px;
            width: 80px;
        }
    </style>
    <title>
        HTML DOM Style Object flexFlow Property
    </title>
</head>
<body>
    <p>Click to apply flexFlow property.</p>
    <button onclick="fun()">Column with NoWrap</button>
    <button onclick="funTwo()">Column with Wrap</button>
    <br>
    <br>
    <div id="flex">
        <div style="background-color: #04af2f;">1</div>
        <div style="background-color: aqua;">2</div>
        <div style="background-color: yellow;">3</div>
        <div style="background-color: whitesmoke">4</div>
        <div style="background-color: black;">5</div>
    </div>
    <script>
        function fun() {
            document.getElementById("flex")
                .style.flexFlow = "column nowrap"
        }
        function funTwo() {
            document.getElementById("flex")
                .style.flexFlow = "column wrap"
        }
    </script>
</body>
</html>

Set flexflow Value to 'row wrap' and 'row wrap-reverse'

The following example sets the flex items to row wrap that is flex direction is row and it should wrap, and row wrap-reverse that is flex direction is row and it will reverse wrap.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #flex {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            display: flex;
        }
        #flex div {
            height: 80px;
            width: 80px;
        }
    </style>
    <title>
        HTML DOM Style Object flexFlow Property
    </title>
</head>
<body>
    <p>Click to apply flexFlow property.</p>
    <button onclick="fun()">Row with Wrap</button>
    <button onclick="funTwo()">Row with Wrap-Reverse</button>
    <br>
    <br>
    <div id="flex">
        <div style="background-color: #04af2f;">1</div>
        <div style="background-color: aqua;">2</div>
        <div style="background-color: yellow;">3</div>
        <div style="background-color: whitesmoke">4</div>
        <div style="background-color: black;">5</div>
    </div>
    <script>
        function fun() {
            document.getElementById("flex")
                .style.flexFlow = "row wrap"
        }
        function funTwo() {
            document.getElementById("flex")
                .style.flexFlow = "row wrap-reverse"
        }
    </script>
</body>
</html>

Supported Browsers

Property
flexFlow	Yes 29	Yes 12	Yes 28	Yes 9	Yes 12.1

html_dom.htm

Print Page