কম্পিউটার টিউটোরিয়াল

জাভাস্ক্রিপ্টে ফ্লেক্সIBLE আইটেমের প্রাথমিক দৈর্ঘ্য সেট করা

ফ্লেক্সIBLE আইটেমের প্রাথমিক দৈর্ঘ্য সেট করতে জাভাস্ক্রিপ্টে flexBasis প্রপার্টিটি ব্যবহার করুন।

উদাহরণ

<!DOCTYPE html> <html>    <head>       <style>          #box {             border: 1px solid #000000;             width: 450px;             height: 150px;             display: flex;          }          #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>flexBasis প্রপার্টি ব্যবহার করে</p>       <button onclick = "display()">সেট করুন</button>       <script>          function display() {             document.getElementById("myID").style.flexBasis = "100px";          }       </script>    </body> </html>

ব্যাখ্যা: flex-basis একটি ফ্লেক্সIBLE আইটেমের প্রাথমিক আকার নির্ধারণ করে (width বা height অনুযায়ী)। ডিফল্ট auto। উদাহরণে প্রাথমিকভাবে ২০পিক্সেল ছিল, বোতাম ক্লিক করলে DIV3-এর জন্য ১০০পিক্সেল সেট করা হয়েছে। এটি flex-grow এবং flex-shrink-এর সাথে মিলে কাজ করে।

  1. জাভাস্ক্রিপ্টে ফন্টের বোল্ডনেস (মোটা) সেট করা

  2. জাভাস্ক্রিপ্টে বাকি আইটেমের সাপেক্ষে ফ্লেক্সIBLE আইটেমের ক্রম সেট করা

  3. জাভাস্ক্রিপ্টে একটি এলিমেন্টের চারদিকের মার্জিন সেট করা

  4. জাভাস্ক্রিপ্টে একটি এলিমেন্টের চারদিকের আউটলাইন শৈলী সেট করা