HTML | DOM Style flexWrap Property

DOM flexGrow property is used to determine whether the flexible items should wrap or not.

Syntax:

  • Return flexWrap property:
    object.style.flexWrap
  • Set flexWrap property:
    object.style.flexWrap = "nowrap|wrap|wrap-reverse|
    initial|inherit"

Properties:



  • nowrap: It specifies that the flexible items will not wrap.
  • wrap: It specifies that the flexible items will wrap if necessary.
  • wrap-reverse: It specifies that the flexible items will wrap, if necessary, in reverse order.
  • initial: It is used to set the property to its default value.
  • inherit: It is used to inherit the property values from the parent element.

Return Value: It returns a string, representing the flex-wrap property of the element.

Example-1: Showing nowrap property

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
       HTML | DOM Style flexWrap Property
    </title>
</head>
    <body>
  
        <center>
            <h1>Geeks 
              <button onclick="wrap()">
                Press
              </button>
            </h1>
        </center>
  
        <h4>
          Clicking on the 'Press' button will set the 
          value of the flexWrap property to "nowrap".
        </h4>
  
        <style>
            #main {
                width: 150px;
                height: 150px;
                border: 1px solid #c3c3c3;
                display: -webkit-flex;
                -webkit-flex-wrap: wrap;
                display: flex;
                flex-wrap: wrap;
            }
              
            #main div {
                width: 50px;
                height: 50px;
            }
        </style>
  
        <div id="main">
            <div style="background-color:green;">G</div>
            <div style="background-color:white;">E</div>
            <div style="background-color:green;">E</div>
            <div style="background-color:white;">K</div>
            <div style="background-color:green;">S</div>
  
        </div>
  
        <script>
            function wrap() {
  
                // SAFARI
                document.getElementById(
                        "main").style.WebkitFlexWrap =
                    "nowrap";
  
                // Other Standard Browsers
                document.getElementById(
                        "main").style.flexWrap =
                    "nowrap";
            }
        </script>
  
    </body>
  
</html>

chevron_right


Output:

Before clicking on the button:

After clicking on the button:

Example-2: Showing wrap-reverse property

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <h1>
      <center>
        Geeks <button onclick="wrap()">Press
        </button>
      </center>
  </h1>
  
   <h4>Clicking on the 'Press' button will set the 
   value of the flexWrap property to "wrap-reverse".</h4>
  
    <style>
        #main {
            width: 150px;
            height: 150px;
            border: 1px solid #c3c3c3;
            display: -webkit-flex;
            -webkit-flex-wrap: wrap;
            display: flex;
            flex-wrap: wrap;
        }
          
        #main div {
            width: 50px;
            height: 50px;
        }
    </style>
  
    <div id="main">
        <div style="background-color:green;">G</div>
        <div style="background-color:white;">E</div>
        <div style="background-color:green;">E</div>
        <div style="background-color:white;">K</div>
        <div style="background-color:green;">S</div>
  
    </div>
  
    <script>
        function wrap() {
            
            // SAFARI
            document.getElementById(
              "main").style.WebkitFlexWrap =
              "nowrap";
            
            // Other Standard Browsers
            document.getElementById(
              "main").style.flexWrap = 
              "wrap-reverse";
        }
    </script>
  
</body>
  
</html>

chevron_right


Output:

Before clicking on the button:

After clicking on the button:

Example-3: Showing initial property


filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM Style flexWrap Property
    </title>
</head>
  
<body>
  
    <center>
        <h1>Geeks <button onclick="wrap()">Press
        </button></h1>
    </center>
  
    <h4>Clicking on the 'Press' button will set the 
    value of the flexWrap property to "initial".</h4>
  
    <style>
        #main {
            width: 150px;
            height: 150px;
            border: 1px solid #c3c3c3;
            display: -webkit-flex;
            -webkit-flex-wrap: wrap;
            display: flex;
            flex-wrap: wrap;
        }
          
        #main div {
            width: 50px;
            height: 50px;
        }
    </style>
  
    <div id="main">
        <div style="background-color:green;">G</div>
        <div style="background-color:white;">E</div>
        <div style="background-color:green;">E</div>
        <div style="background-color:white;">K</div>
        <div style="background-color:green;">S</div>
  
    </div>
  
    <script>
        function wrap() {
  
            // SAFARI
            document.getElementById(
                    "main").style.WebkitFlexWrap =
                "nowrap";
  
            // Other Standard Browsers
            document.getElementById(
                    "main").style.flexWrap =
                "initial";
        }
    </script>
  
</body>
  
</html>

chevron_right


Output:

Before clicking on the button:

After clicking on the button:

Example-4: Showing inherit property

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <h1>
      <center>
        Geeks <button onclick="wrap()">Press
        </button>
      </center
  </h1>
  
   <h4>Clicking on the 'Press' button will set
     the value of the flexWrap property to "inherit".</h4>
  
    <style>
        #main {
            width: 150px;
            height: 150px;
            border: 1px solid #c3c3c3;
            display: -webkit-flex;
            -webkit-flex-wrap: wrap;
            display: flex;
            flex-wrap: wrap;
        }
          
        #main div {
            width: 50px;
            height: 50px;
        }
    </style>
  
    <div id="main">
        <div style="background-color:green;">G</div>
        <div style="background-color:white;">E</div>
        <div style="background-color:green;">E</div>
        <div style="background-color:white;">K</div>
        <div style="background-color:green;">S</div>
  
    </div>
  
    <script>
        function wrap() {
            
            // SAFARI
            document.getElementById(
              "main").style.WebkitFlexWrap = 
              "nowrap";
            
            // Other Standard Browsers
            document.getElementById(
              "main").style.flexWrap =
              "inherit";
        }
    </script>
  
</body>
  
</html>

chevron_right


Output:

Before clicking on the button:

After clicking on the button:

Browser Support: The listed browsers support DOM flexWrap property:

  • Google Chrome
  • Firefox
  • Internet Explorer 11.0
  • Opera
  • Safari 6.1


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.