Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Style flexWrap Property

  • Last Updated : 31 Jul, 2019

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






<!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>

Output:

Before clicking on the button:

After clicking on the button:

Example-2: Showing wrap-reverse property




<!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>

Output:

Before clicking on the button:

After clicking on the button:

Example-3: Showing initial property






<!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>

Output:

Before clicking on the button:

After clicking on the button:

Example-4: Showing inherit property




<!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>

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

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :