HTML - DOM Style Object flexWrap Property

Quiz

HTML DOM Style Object flexWrap property specifies whether flexible items should wrap or not.

Syntax

Set the flexWrap property:

object.style.flexWrap= "nowrap | wrap | wrap-reverse | initial | inherit";

Get the flexWrap property:

object.style.flexWrap;

Property Values

Value	Description
nowrap	It is the default value which specifies flex items will not wrap.
wrap	It specifies flex items will wrap, if required.
wrap-reverse	It specifies flex items will wrap, if required 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 wrap property of an element.

Example of HTML DOM Style Object 'flexWrap' Property

The following example illustrates 'wrap' , 'nowrap' and 'wrap-reverse' property value.

<!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 flexWrap Property
    </title>
</head>
<body>
    <p>Click to apply flexWrap property.</p>
    <button onclick="fun()">Wrap</button>
    <button onclick="funTwo()">No Wrap</button>
    <button onclick="funThree()">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.flexWrap = "wrap"
        }
        function funTwo() {
            document.getElementById("flex")
                .style.flexWrap = "nowrap"
        }
        function funThree() {
            document.getElementById("flex")
                .style.flexWrap = "wrap-reverse"
        }
    </script>
</body>
</html>

Supported Browsers

Property
flexWrap	Yes 29	Yes 12	Yes 28	Yes 9	Yes 16

html_dom.htm

Print Page