জাভাস্ক্রিপ্টে বাকি আইটেমের সাপেক্ষে আইটেম কতটুকু সঙ্কুচিত হবে সেট করা

জাভাস্ক্রিপ্টে বাকি আইটেমের সাপেক্ষে একটি আইটেম কতটুকু সঙ্কুচিত হবে তা সেট করতে 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>flexShrink প্রপার্টি ব্যবহার করে</p>       <button onclick = "display()">সেট করুন</button>             <script>       function display() {          document.getElementById("myID").style.flexShrink = "5";       }       </script>    </body> </html>

ব্যাখ্যা: flex-shrink (ডিফল্ট ১) নির্ধারণ করে কন্টেইনার ছোট হলে আইটেম কতটুকু ছোট হবে। বেশি মান = বেশি সঙ্কুচিত হবে। উদাহরণে DIV2-এর flexShrink = 5 সেট করা হয়েছে, ফলে জায়গা কম থাকলে DIV1-এর চেয়ে ৫ গুন বেশি সঙ্কুচিত হবে। flex-grow বড় হওয়া নিয়ন্ত্রণ করে, flex-shrink ছোট হওয়া নিয়ন্ত্রণ করে।