HTML DOM Style flexGrow प्रॉपर्टी का उपयोग उस अनुपात को सेट करने के लिए किया जाता है जिसके द्वारा एक तत्व अपने आकार को एक flex तत्व के अंदर समायोजित करता है। यह इकाई रहित संख्यात्मक मान स्वीकार करता है।
−
. के लिए वाक्य रचना निम्नलिखित हैफ्लेक्सग्रो प्रॉपर्टी सेट करना -
object.style.flexGrow = "number|initial|inherit"
यहां, संख्या निर्दिष्ट करती है कि तत्व अन्य तत्वों के अनुपात में कितना बढ़ता है और इसका डिफ़ॉल्ट मान 0 है। प्रारंभिक संपत्ति मान को डिफ़ॉल्ट मान पर सेट करता है जबकि इनहेरिट इसे मूल संपत्ति मान पर सेट करता है।
आइए फ्लेक्सग्रो प्रॉपर्टी के लिए एक उदाहरण देखें -
उदाहरण
<!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="The odd div elements are now grown 3x their even counterparts";
}
</script>
</head>
<body>
<div id="demo">
<div></div>
<div></div>
<div>DEMO</div>
<div></div>
<div></div>
</div>
<p>Change the above odd div size by clicking the below button</p>
<button onclick="changeFlexGrow()">Change Flex Grow</button>
<p id="Sample"></p>
</body>
</html> आउटपुट
“फ्लेक्स ग्रो बदलें . पर क्लिक करने पर "बटन -
