HTML DOM Style flexShrink প্রপার্টি একটি ফ্লেক্স এলিমেন্টের ভিতরে তার সাবলিংসের সাথে সমন্বয়ে একটি এলিমেন্ট কতটুকু সঙ্কুচিত হবে তার অনুপাত সেট করতে ব্যবহৃত হয়।
সিনট্যাক্স
flexShrink প্রপার্টি সেট করার সিনট্যাক্স:
object.style.flexShrink = "number|initial|inherit"
এখানে, number নির্দিষ্ট করে যে এলিমেন্টটি অন্য এলিমেন্টের তুলনায় কতটুকু সঙ্কুচিত হবে এবং এর ডিফল্ট মান ০। initial প্রপার্টি মানকে ডিফল্ট মানে সেট করে যখন inherit এটি পিতামাতা প্রপার্টি মানে সেট করে।
উদাহরণ
<!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="চতুর্থ এলিমেন্ট ৩x তাদের কাউন্টারপার্টস দ্বারা সঙ্কুচিত হয়েছে"; } </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>নিচের বাটনে ক্লিক করলে উপরের ৪র্থ div-এর shrink প্রপার্টি পরিবর্তন হবে</p> <button onclick="changeFlexShrink()">ফ্লেক্স শ্রিংক পরিবর্তন করুন</button> <p id="Sample"></p> </body> </html>
আউটপুট
ফ্লেক্স শ্রিংক পরিবর্তন করুন বাটনে ক্লিক করলে:
