CSS-এ Flexbox এলিমেন্টস কীভাবে কাজ করে?

একটি ফ্লেক্স কন্টেইনার সংজ্ঞায়িত করে এবং তার মধ্যে ফ্লেক্স আইটেমগুলো সেট করা হয়।

উদাহরণ

নিচের কোডটি চালিয়ে Flexbox এলিমেন্টস কীভাবে কাজ করে তা শিখুন। Q1, Q2, Q3 এখানে ফ্লেক্স-আইটেম। পুরো এলাকা ফ্লেক্সবক্স এলিমেন্ট।

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      .mycontainer { 
        display: flex; 
        background-color: orange; 
      } 
      .mycontainer > div { 
        background-color: white; 
        text-align: center; 
        line-height: 40px; 
        font-size: 25px; 
        width: 100px; 
        margin: 5px; 
      } 
    </style> 
  </head> 
  <body> 
    <h1>Quiz</h1> 
    <div class="mycontainer"> 
      <div>Q1</div> 
      <div>Q2</div> 
      <div>Q3</div> 
      <div>Q4</div> 
      <div>Q5</div> 
      <div>Q6</div> 
    </div> 
  </body> 
</html>

ব্যাখ্যা: .mycontainer এ display: flex সেট করলে এটি ফ্লেক্স কন্টেইনার হয়ে যায়। এর সরাসরি চাইল্ড এলিমেন্টগুলো (<div>) স্বয়ংক্রিয়ভাবে ফ্লেক্স আইটেম হয়ে যায়। ডিফল্টভাবে সেগুলো হরিজেন্টাল সারিয়ে থাকে (flex-direction: row), এক লাইনে (flex-wrap: nowrap), এবং ক্রস-অক্ষে ফেলায় (align-items: stretch)।