HTML DOM Style flexGrow প্রপার্টি একটি ফ্লেক্স এলিমেন্টের ভিতরে একটি এলিমেন্ট কতটুকু জায়গা নেবে তার অনুপাত সেট করতে ব্যবহৃত হয়। এটি ইউনিটলেস নümerিক মান গ্রহণ করে।
সিনট্যাক্স
flexGrow প্রপার্টি সেট করার সিনট্যাক্স:
object.style.flexGrow = "number|initial|inherit"
এখানে, number নির্দিষ্ট করে যে এলিমেন্টটি অন্য এলিমেন্টের তুলনায় কতটুকু বড় হবে এবং এর ডিফল্ট মান ০। initial প্রপার্টি মানকে ডিফল্ট মানে সেট করে যখন inherit এটি পিতামাতা প্রপার্টি মানে সেট করে।
উদাহরণ
<!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="বিষম div এলিমেন্টগুলো এখন ৩x তাদের জোড় কাউন্টারপার্টস দ্বারা বড় হয়েছে"; } </script> </head> <body> <div id="demo"> <div></div> <div></div> <div>DEMO</div> <div></div> <div></div> </div> <p>নিচের বাটনে ক্লিক করলে উপরের বিজোড় div সাইজ পরিবর্তন হবে</p> <button onclick="changeFlexGrow()">ফ্লেক্স গ্রো পরিবর্তন করুন</button> <p id="Sample"></p> </body> </html>
আউটপুট
ফ্লেক্স গ্রো পরিবর্তন করুন বাটনে ক্লিক করলে:
