HTML DOM Style flexWrap Property

The HTML DOM Style flexWrap property is used for specifying how the elements inside the flex element are wrapped.

Following is the syntax for −

Setting the flexWrap property −

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

The above properties are explained as follows −

Value	Description
nowrap	Thisis the default value specifying that the flexible items will notwrap.
wrap	Thisspecifies the flexible items will wrap if necessary.
wrap-reverse	Wrapsthe flexible items if necessary but in reverse order.
initial	Forsetting this property to initial value.
inherit	Toinherit the parent property value

Let us look at an example for the flexWrap property −

Example

<!DOCTYPE html>
<html>
<head>
<style>
   #demo {
      margin: auto;
      width: 180px;
      height: 120px;
      box-shadow: 0 0 0 5px brown;
      display: flex;
      flex-wrap: wrap;
   }
   #demo div {
      padding: 0;
      width: 50px;
      height: 50px;
      border: 5px solid;
      border-radius: 15%;
   }
   #demo div:nth-child(even) {
      border-color: black;
   }
   #demo div:nth-child(odd) {
      border-color: red;
   }
</style>
<script>
   function changeFlexWrap() {
      document.getElementById("demo").style.flexWrap="nowrap";
      document.getElementById("Sample").innerHTML="The flex wrap property for the container div is    set to no-wrap";
   }
</script>
</head>
<body>
   <div id="demo">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
   </div>
   <p>Change the above container flex wrap property by clicking the below button</p>
   <button onclick="changeFlexWrap()">Change Flex Wrap</button>
   <p id="Sample"></p>
</body>
</html>

Output

HTML DOM Style flexWrap Property

On clicking the “Change Flex Wrap” button −

HTML DOM Style flexWrap Property