জাভাস্ক্রিপ্টে বাকি আইটেমের সাপেক্ষে আইটেমের আপেক্ষিক দৈর্ঘ্য সেট করা

জাভাস্ক্রিপ্টে flex প্রপার্টি ব্যবহার করে বাকি আইটেমের সাপেক্ষে একটি আইটেমের আপেক্ষিক দৈর্ঘ্য সেট করুন।

উদাহরণ

<!DOCTYPE html> <html>    <head>       <style>          #box {             border: 1px solid #000000;             width: 300px;             height: 400px;             display: flex;          }       </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;">DIV3</div>       </div>       <button onclick = "display()">সেট করুন</button>       <script>          function display() {             var a = document.getElementById("box");             var b = a.getElementsByTagName("DIV");             var j ;             for (j = 0; j < b.length; j++) {                b[j].style.flex = "1";             }          }       </script>    </body> </html>

ব্যাখ্যা: flex হল flex-grow, flex-shrink, flex-basis শর্টহ্যান্ড। flex: 1 মানে flex: 1 1 0% — সমান অনুপাতে বাড়তে এবং ছোট হতে পারবে, প্রাথমিক আকার ০। এখানে লুপ দিয়ে সব DIV-এ একসাথে প্রয়োগ করা হয়েছে, ফলে তিনটি DIV সমান জায়গা ভাগ করবে।