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

জাভাস্ক্রিপ্টে বাকি আইটেমের সাপেক্ষে একটি আইটেম কতটুকু বড় হবে তা সেট করতে flexGrow প্রপার্টিটি ব্যবহার করুন।

উদাহরণ

নিচের কোডটি চালিয়ে flexGrow প্রপার্টির সাথে কীভাবে কাজ করে তা শিখুন:

<!DOCTYPE html> <html>    <head>       <style>          #box {             border: 1px solid #000000;             width: 250px;             height: 150px;             display: flex;             flex-flow: row wrap;          }          #box div {             flex-grow: 0;             flex-shrink: 1;             flex-basis: 20px;          }       </style>    </head>    <body>       <div id = "box">          <div style = "background-color:orange;">DIV1</div>          <div style = "background-color:blue;">DIV2</div>          <div style = "background-color:yellow;" id="myID">DIV3</div>       </div>       <p>flexGrow প্রপার্টি ব্যবহার করে</p>       <button onclick = "display()">সেট করুন</button>       <script>          function display() {             document.getElementById("myID").style.flexGrow = "2";          }       </script>    </body> </html>

ব্যাখ্যা: flex-grow (ডিফল্ট ০) নির্ধারণ করে অতিরিক্ত জায়গা কীভাবে বন্টবে। মান ০ = বড় হবে না। উদাহরণে DIV3-এর flexGrow = 2 সেট করা হয়েছে, DIV1 এবং DIV2-এর ০ থাকায় অতিরিক্ত জায়গার ২/২ = ১০০% DIV3 পাবে। যদি সবার ১ হতো, তবে সমান ভাগ হতো।