flexShrink का प्रयोग करें यह निर्धारित करने के लिए कि जावास्क्रिप्ट के साथ आइटम बाकी के सापेक्ष कितना सिकुड़ जाएगा।
उदाहरण
flexGrow के साथ काम करने का तरीका जानने के लिए आप निम्न कोड को चलाने का प्रयास कर सकते हैं संपत्ति -
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: 1px solid #000000;
width: 500px;
height: 100px;
display: flex;
}
#box div {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 300px;
}
</style>
</head>
<body>
<div id = "box">
<div style = "background-color:orange;">DIV1</div>
<div style = "background-color:yellow;" id = "myID">DIV2</div>
</div>
<p>Using flexShrink property</p>
<button onclick = "display()">Set</button>
<script>
function display() {
document.getElementById("myID").style.flexShrink = "5";
}
</script>
</body>
</html>