HTML DOM স্টাইল ফ্লেক্সগ্রো প্রপার্টিটি সেই অনুপাত সেট করতে ব্যবহৃত হয় যার দ্বারা একটি উপাদান একটি ফ্লেক্স উপাদানের মধ্যে তার আকারকে মিটমাট করে। এটি এককবিহীন সংখ্যাসূচক মান গ্রহণ করে।
−
-এর সিনট্যাক্স নিচে দেওয়া হলflexGrow প্রপার্টি সেট করা হচ্ছে -
object.style.flexGrow = "number|initial|inherit"
এখানে, সংখ্যাটি নির্দিষ্ট করে যে উপাদানটি অন্যান্য উপাদানের অনুপাতে কতটা বৃদ্ধি পায় এবং এর ডিফল্ট মান হল 0। প্রারম্ভিক সম্পত্তির মানটিকে ডিফল্ট মানের সাথে সেট করে যখন উত্তরাধিকার এটিকে মূল সম্পত্তির মান হিসাবে সেট করে।
আসুন 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="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> আউটপুট
“চেঞ্জ ফ্লেক্স গ্রো ক্লিক করলে ” বোতাম -
