HTML DOM Style flexGrow प्रॉपर्टी का उपयोग उस अनुपात को सेट करने के लिए किया जाता है जिससे कोई तत्व फ्लेक्स तत्व के अंदर अपना आकार समायोजित करता है। यह यूनिटलेस न्यूमेरिक मान स्वीकार करता है।
सिंटैक्स निम्नलिखित है:
flexGrow प्रॉपर्टी सेट करना:
object.style.flexGrow = "number|initial|inherit"
यहां, number निर्दिष्ट करता है कि तत्व अन्य तत्वों के अनुपात में कितना बढ़ता है और इसका डिफ़ॉल्ट मान 0 है। Initial प्रॉपर्टी मान को डिफ़ॉल्ट मान पर सेट करता है जबकि inherit इसे मूल तत्व के प्रॉपर्टी मान पर सेट करता है।
आइए flexGrow प्रॉपर्टी के लिए एक उदाहरण देखें:
उदाहरण
<!DOCTYPE html> <html> <head> <style> #demo { height: 100px; border: 3px groove navy; display: flex; text-align: center; line-height: 90px; } div div { box-shadow: inset 0 0 4px indigo; } #demo div:nth-of-type(even) { flex-grow: 1; background-color: lavender; } #demo div:nth-of-type(odd) { flex-grow: 1; background-color: thistle; } </style> <script> function changeFlexGrow() { for(var i=1;i<6;i+=2) document.getElementsByTagName("div")[i].style.flexGrow="3"; document.getElementById("Sample").innerHTML="विषम div तत्व अब अपने समकक्षों की तुलना में 3x बढ़ गए हैं"; } </script> </head> <body> <div id="demo"> <div></div> <div></div> <div>DEMO</div> <div></div> <div></div> </div> <p>नीचे दिए गए बटन पर क्लिक करके उपरोक्त विषम div आकार बदलें</p> <button onclick="changeFlexGrow()">फ्लेक्स ग्रो बदलें</button> <p id="Sample"></p> </body> </html>आउटपुट
फ्लेक्स ग्रो बदलें बटन पर क्लिक करने पर:
