HTML - DOM Style Object flexDirection Property

Quiz

HTML DOM Style Object flexDirection property sets or returns the direction of placement of flex elements.

Syntax

Set the flexDirection property:

object.style.flexDirection= "row | row-reverse | column | column-reverse | initial | inherit";

Get the flexDirection property:

object.style.flexDirection;

Property Values

Value	Description
row	It is the default value which displays the flex items as row horizontally.
row-reverse	It is Same as row, but in reverse order.
column	It displays flex items as a column, vertically.
column-reverse	It is Same as column, but in reverse order.
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 direction property of an element.

Examples of HTML DOM Style Object 'flexDirection' Property

The following examples illustrates different property values of flex direction property.

Set Flex Direction to 'row-reverse'

The following example sets the flex direction to row-reverse which is by default set to row.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #flex {
            width: 500px;
            height: 500px;
            border: 1px solid black;
            display: flex;
        }
        #flex div {
            height: 80px;
            width: 80px;
        }
    </style>
    <title>
        HTML DOM Style Object flexDirection Property
    </title>
</head>
<body>
    <p>Click to apply flexDirection property.</p>
    <button onclick="fun()">Row-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.flexDirection = "row-reverse"
        }
    </script>
</body>
</html>

Set Flex Direction to 'column' and 'column-reverse'

In this example we have set flex direction to column and column reverse.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #flex {
            width: 500px;
            height: 500px;
            border: 1px solid black;
            display: flex;
        }
        #flex div {
            height: 80px;
            width: 80px;
        }
    </style>
    <title>
        HTML DOM Style Object flexDirection Property
    </title>
</head>
<body>
    <p>Click to apply flexDirection property.</p>
    <button onclick="fun()">Column</button>
    <button onclick="funTwo()">Column-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.flexDirection = "column"
        }
        function funTwo() {
            document.getElementById("flex")
                .style.flexDirection = "column-reverse"
        }
    </script>
</body>
</html>

Supported Browsers

Property
flexDirection	Yes 29	Yes 12	Yes 20	Yes 9	Yes 12.1

html_dom.htm

Print Page