HTML DOM Style flexFlow प्रॉपर्टी का उपयोग किसी तत्व के flexDirection और flexWrap प्रॉपर्टी को निर्दिष्ट करने के लिए किया जाता है। यह flexDirection और flexWrap के लिए एक शॉर्टहैंड है और उसी क्रम में मान स्वीकार करता है।
सिंटैक्स निम्नलिखित है:
flexFlow प्रॉपर्टी सेट करना:
object.style.flexFlow = "flex-direction flex-wrap|initial|inherit"
उपरोक्त प्रॉपर्टी निम्नलिखित हैं:
| मान | विवरण |
|---|---|
| flex-direction | इसका उपयोग फ्लेक्सिबल आइटम की दिशा निर्दिष्ट करने के लिए किया जाता है और इसके मान row, row-reverse, column, column-reverse, initial और inherit हैं। इसका डिफ़ॉल्ट मान row है। |
| flex-wrap | इसका उपयोग यह निर्दिष्ट करने के लिए किया जाता है कि फ्लेक्सिबल आइटम को लपेटना चाहिए या नहीं। इसके मान nowrap, wrap, wrap-reverse, initial, और inherit हैं। इसका डिफ़ॉल्ट मान nowrap है। |
| initial | इस प्रॉपर्टी को प्रारंभिक मान पर सेट करने के लिए। |
| inherit | मूल तत्व के प्रॉपर्टी मान को विरासत में लेने के लिए। |
आइए flexFlow प्रॉपर्टी के लिए एक उदाहरण देखें:
उदाहरण
<!DOCTYPE html> <html> <head> <style> #demo { width: 600px; height: 190px; border:1px solid black; display: flex; flex-flow: row-reverse no-wrap; } #demo div { width:100px; height:100px; } </style> <script> function changeFlexFlow() { document.getElementById("demo").style.flexFlow="row wrap"; document.getElementById("Sample").innerHTML="फ्लेक्स फ्लो प्रॉपर्टी अब row wrap पर सेट है"; } </script> </head> <body> <div id="demo"> <div><img src="https://www.tutorialspoint.com/images/css.png"></div> <div>1</div> <div><img src="https://www.tutorialspoint.com/images/Swift.png"></div> <div>2</div> <div><img src="https://www.tutorialspoint.com/images/reactjs.png"></div> <div>3</div> <div><img src="https://www.tutorialspoint.com/images/blockchain.png"></div> <div>4</div> <div><img src="https://www.tutorialspoint.com/images/3d.png"></div> <div>5</div> </div> <p>नीचे दिए गए बटन पर क्लिक करके उपरोक्त कंटेनर div फ्लेक्स फ्लो प्रॉपर्टी बदलें</p> <button onclick="changeFlexFlow()">फ्लेक्स फ्लो बदलें</button> <p id="Sample"></p> </body> </html>आउटपुट
फ्लेक्स फ्लो बदलें बटन पर क्लिक करने पर:
