HTML DOM Style flexShrink प्रॉपर्टी का उपयोग उस अनुपात को सेट करने के लिए किया जाता है जिससे कोई तत्व फ्लेक्स तत्व के अंदर अपने सहोदर तत्वों के संबंध में अपना आकार छोटा करता है।
सिंटैक्स निम्नलिखित है:
flexShrink प्रॉपर्टी सेट करना:
object.style.flexShrink = "number|initial|inherit"
यहां, "number" निर्दिष्ट करता है कि तत्व अन्य तत्वों के अनुपात में कितना सिकुड़ता है और इसका डिफ़ॉल्ट मान 0 है। "initial" प्रॉपर्टी मान को डिफ़ॉल्ट मान पर सेट करता है जबकि "inherit" इसे मूल तत्व के प्रॉपर्टी मान पर सेट करता है।
आइए flexShrink प्रॉपर्टी के लिए एक उदाहरण देखें:
उदाहरण
<!DOCTYPE html> <html> <head> <style> div { margin: auto; box-shadow: inset 0 0 3px rgba(0,0,0,0.4); } #demo { width: 500px; height: 30px; display: flex; text-align: center; font-size: 1.2em; line-height: 30px; } #demo div { flex-basis: 120px; } </style> <script> function changeFlexShrink() { document.getElementsByTagName("DIV")[4].style.flexShrink="3"; document.getElementById("Sample").innerHTML="चौथा तत्व अपने समकक्षों की तुलना में 3x सिकुड़ गया है"; } </script> </head> <body> <div id="demo"> <div>पहला Div</div> <div>दूसरा Div</div> <div>तीसरा Div</div> <div>चौथा Div</div> <div>पांचवां Div</div> </div> <br> <p>नीचे दिए गए बटन पर क्लिक करके उपरोक्त div में 4th div की सिकुड़न प्रॉपर्टी बदलें</p> <button onclick="changeFlexShrink()">फ्लेक्स सिकुड़न बदलें</button> <p id="Sample"></p> </body> </html>आउटपुट
फ्लेक्स सिकुड़न बदलें बटन पर क्लिक करने पर:
