HTML DOM Style flexShrink गुण का उपयोग उस अनुपात को सेट करने के लिए किया जाता है जिसके द्वारा एक flex तत्व के अंदर एक तत्व अपने भाई-बहनों के संबंध में अपने आकार को छोटा करता है।
−
. के लिए वाक्य रचना निम्नलिखित हैflexShrink गुण सेट करना -
object.style.flexShrink = "number|initial|inherit"
यहां, "नंबर" निर्दिष्ट करता है कि तत्व अन्य तत्वों के अनुपात में कितना सिकुड़ता है और इसका डिफ़ॉल्ट मान 0 है। "प्रारंभिक" संपत्ति मान को डिफ़ॉल्ट मान पर सेट करता है जबकि "विरासत" इसे मूल संपत्ति मान पर सेट करता है।
आइए 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="The fourth element has been shrinked by 3x their counterparts";
}
</script>
</head>
<body>
<div id="demo">
<div>First Div</div>
<div>Second Div</div>
<div>Third Div</div>
<div>Fourth Div</div>
<div>Fifth Div</div>
</div>
<br>
<p>Change the 4th div shrink property in the above divs by clicking the below button</p>
<button onclick="changeFlexShrink()">Change Flex Shrink</button>
<p id="Sample"></p>
</body>
</html> आउटपुट
“फ्लेक्स सिकोड़ें बदलें . पर क्लिक करने पर "बटन -
