HTML DOM Style flexBasis প্রপার্টি

HTML DOM Style flexBasis প্রপার্টি ফ্লেক্স ডিসপ্লে সহ এলিমেন্টের প্রাথমিক আকার নির্দিষ্ট করতে ব্যবহৃত হয়। flex-basis-এর জন্য auto-এর अलावा অন্য যেকোনো মানের জন্য এই প্রপার্টিটি width-এর চেয়ে বেশি অগ্রাধিকার পায়।

সিনট্যাক্স

flexBasis প্রপার্টি সেট করার জন্য:

object.style.flexBasis = "number|auto|initial|inherit"

প্রপার্টি মানগুলি

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
  #demo, #demo2 {
    background-color: #fff8dc;
    margin: 10px;
    height: 100px;
    box-shadow: 0 0 0 4px brown;
    display: flex;
  }
  #demo div {
    flex-basis: 110px;
  }
</style>
<script>
  function changeFlexBasis() {
    for(var i=1; i<3; i++) {
      document.getElementsByTagName("DIV")[i].style.flexBasis = "200px";
    }
    document.getElementById("Sample").innerHTML = "ফ্লেক্স বেসিস মান 200px-এ বাড়ানো হয়েছে";
  }
</script>
</head>
<body>
  <h2>ডেমো হেডিং</h2>
  <div id="demo">
    <div><img src="https://www.tutorialspoint.com/images/home_tensor_flow.png"></div>
    <div><img src="https://www.tutorialspoint.com/images/home_blockchain_python.png"></div>
    <div><img src="https://www.tutorialspoint.com/images/multilanguage-tutorials.png"></div>
  </div>
  <p>নিচের বাটনে ক্লিক করে ডিভের ভিতরের ছবির জন্য flex-basis প্রপার্টি পরিবর্তন করুন</p>
  <button onclick="changeFlexBasis()">ফ্লেক্স বেসিস পরিবর্তন করুন</button>
  <p id="Sample"></p>
</body>
</html>

আউটপুট

প্রাথমিকভাবে ছবিগুলোর ফ্লেক্স বেসিস 110px থাকবে।

"ফ্লেক্স বেসিস পরিবর্তন করুন" বাটনে ক্লিক করার পর সব ছবির ফ্লেক্স বেসিস 200px-এ পরিবর্তিত হবে।