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

JavascriptObject Oriented ProgrammingFront End Technology

Use the flexWrap property in JavaScript set whether the flexible items should wrap or not with JavaScript.

Example

You can try to run the following code to implement flexWrap property in JavaScript −

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            border: 1px solid #000000;
            width: 120px;
            height: 150px;
            display: flex;
            flex-wrap: wrap;
         }
         #box div {
            height: 50px;
            width: 50px;
         }
      </style>
   </head>
   <body>
      <div id = "box">
         <div style = "background-color:orange;">DIV1</div>
         <div style = "background-color:blue;">DIV2</div>
         <div style = "background-color:yellow;" id = "myID">DIV3</div>
      </div>
      <p>Using flexWrap property</p>
      <button onclick = "display()">Set</button>
      <script>
         function display() {
            document.getElementById("box").style.flexWrap = "nowrap";
         }
      </script>
   </body>
</html>
raja
Published on 27-Feb-2018 17:03:06
Advertisements