Set whether the flexible items should wrap or not with JavaScript?

Javascript Web Development Front End Technology

In this tutorial, let us look at the way to set whether the flexible items should wrap or not with JavaScript.

We can use the flex-wrap property in JavaScript to set the item wrap value.

Let us look into this in brief.

Using the Style flex-wrap Property

The flex-wrap property defines whether to wrap the items within a container element. The items must be flexible for the flex-wrap property to work. The default value is nowrap.

Users can follow the syntax below to use the flex-wrap property.

Syntax

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

The syntax above sets the flex-wrap value to the item's style.

Values

nowrap − Specifies that items will not wrap. Therefore items display in a single line.
wrap − Specifies that the items will wrap if items overflow. Therefore items display in multi-lines.
wrap-reverse − Specifies that the items will wrap in reverse order if items overflow. Therefore items display in multi-lines in reverse order.
initial − Sets this property to its default value.
inherit − Inherits the property from the parent element.

Return Value

The return value is a string that represents the flex-wrap property.

Example 1

In this program, we have two flexible container elements. Five items are the child elements of each container. When the user clicks the button, we call the function to set the flex-wrap value to all the items using the flex-wrap property syntax given above. The first container wraps the elements in multi-lines in the DOM order because 'wrap' is the flex-wrap value. The second container displays the items in a single line because "nowrap" is the flex-wrap value.


<html>
<head>
   <style>
      #flxWrpCont1,
      #flxWrpCont2 {
         width: 90px;
         height: 90px;
         border: 1px solid black;
         display: flex;
      }
      #flxWrpEl {
         width: 30px;
         height: 30px;
      }
      #flxWrpCont1 div:nth-child(odd) {
         background-color: skyblue;
      }
      #flxWrpCont2 div:nth-child(odd) {
         background-color: grey;
      }
   </style>
</head>
<body>
   <h2> Setting the item wrap value to the elements using the <i> flexWrap property </i>
   </h2>
   <br>
   <br>
   <b> Wrap </b>
   <br>
   <br>
   <div id="flxWrpCont1">
      <div id="flxWrpEl"> 1 </div>
      <div id="flxWrpEl"> 2 </div>
      <div id="flxWrpEl"> 3 </div>
      <div id="flxWrpEl"> 4 </div>
      <div id="flxWrpEl"> 5 </div>
   </div>
   <br>
   <br>
   <b> No Wrap </b>
   <br>
   <br>
   <div id="flxWrpCont2">
      <div id="flxWrpEl"> 1 </div>
      <div id="flxWrpEl"> 2 </div>
      <div id="flxWrpEl"> 3 </div>
      <div id="flxWrpEl"> 4 </div>
      <div id="flxWrpEl"> 5 </div>
   </div>
   <br>
   <br>
   <div id="flxWrpWrap">
      <button onclick="setflexWrap()"> Set </button>
   </div>
   <script>
      function setflexWrap() {
         var flxWrpWrap = document.getElementById("flxWrpWrap");
         flxWrpWrap.style.display = "none";
         var flxWrpCont1 = document.getElementById("flxWrpCont1");
         var flxWrpCont2 = document.getElementById("flxWrpCont2");
         flxWrpCont1.style.flexWrap = "wrap";
         flxWrpCont2.style.flexWrap = "nowrap";
      }
   </script>
</body>
</html>

Example 2

In this program, we have seven items inside a container. When the user clicks the button, we call the function to set the flex-wrap value to the items.

The items wrap in the reverse order because 'wrap-reverse' is the flex-wrap value. The 'VIB’-‘GYO’-‘R' order changes to 'R’-‘GYO’-‘VIB' in the reverse row order.


<html>
<head>
   <style>
      #flxWrpRevCont {
         width: 300px;
         height: 300px;
         border: 1px solid black;
         display: flex;
      }
      #flxWrpRevEl {
         width: 100px;
         height: 100px;
         color: #ffff;
      }
      #flxWrpRevEl:nth-child(1) {
         background-color: violet;
      }
      #flxWrpRevEl:nth-child(2) {
         background-color: indigo;
      }
      #flxWrpRevEl:nth-child(3) {
         background-color: blue;
      }
      #flxWrpRevEl:nth-child(4) {
         background-color: green;
      }
      #flxWrpRevEl:nth-child(5) {
         background-color: yellow;
         color: #000000;
      }
      #flxWrpRevEl:nth-child(6) {
         background-color: orange;
      }
      #flxWrpRevEl:nth-child(7) {
         background-color: red;
      }
   </style>
</head>
<body>
   <h2> Setting the item to wrap reverse value to the elements using the <i> flexWrap property </i>
   </h2>
   <br>
   <br>
   <div id="flxWrpRevCont">
      <div id="flxWrpRevEl"> V </div>
      <div id="flxWrpRevEl"> I </div>
      <div id="flxWrpRevEl"> B </div>
      <div id="flxWrpRevEl"> G </div>
      <div id="flxWrpRevEl"> Y </div>
      <div id="flxWrpRevEl"> O </div>
      <div id="flxWrpRevEl"> R </div>
   </div>
   <br>
   <br>
   <div id="flxWrpRevWrap">
      <button onclick="setflexRevWrap()"> Reverse </button>
   </div>
   <script>
      function setflexRevWrap() {
         var flxWrpRevWrap = document.getElementById("flxWrpRevWrap");
         
         //flxWrpRevWrap.style.display = "none";
         var flxWrpRevCont = document.getElementById("flxWrpRevCont");
         flxWrpRevCont.style.flexWrap = "wrap-reverse";
      }
   </script>
</body>
</html>

This tutorial taught us the flex-wrap property to set the wrapping value of the items. Useful in a multiple-column layout to wrap elements in the order or the reverse order.