HTML DOM Style flexWrap प्रॉपर्टी

HTML DOM Style flexWrap प्रॉपर्टी का उपयोग यह निर्दिष्ट करने के लिए किया जाता है कि फ्लेक्स तत्व के अंदर के तत्व कैसे लपेटे (wrapped) जाते हैं।

सिंटैक्स निम्नलिखित है:

flexWrap प्रॉपर्टी सेट करना:

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

उपरोक्त प्रॉपर्टी निम्नलिखित हैं:

आइए flexWrap प्रॉपर्टी के लिए एक उदाहरण देखें:

उदाहरण

<!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="कंटेनर div के लिए फ्लेक्स रैप प्रॉपर्टी अब नो-रैप पर सेट है";    } </script> </head> <body>    <div id="demo">       <div></div>       <div></div>       <div></div>       <div></div>       <div></div>    </div>    <p>नीचे दिए गए बटन पर क्लिक करके उपरोक्त कंटेनर फ्लेक्स रैप प्रॉपर्टी बदलें</p>    <button onclick="changeFlexWrap()">फ्लेक्स रैप बदलें</button>    <p id="Sample"></p> </body> </html>

आउटपुट

फ्लेक्स रैप बदलें बटन पर क्लिक करने पर: