CSS align-items: stretch মান ব্যবহার

align-items: stretch মান (ডিফল্ট) ফ্লেক্স আইটেমগুলকে ক্রস-অক্ষ দিয়ে কন্টেইনারের পুরো উচ্চতা পর্যন্ত ফেলায়।

উদাহরণ

নিচের কোডটি চালিয়ে stretch মান ব্যবহার দেখুন:

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      .mycontainer { 
        display: flex; 
        height: 200px; 
        background-color: red; 
        align-items: stretch; 
      } 
      .mycontainer > div { 
        background-color: orange; 
        text-align: center; 
        line-height: 60px; 
        font-size: 30px; 
        width: 100px; 
        margin: 5px; 
      } 
    </style> 
  </head> 
  <body> 
    <h1>Queue</h1> 
    <div class="mycontainer"> 
      <div>Q1</div> 
      <div>Q2</div> 
      <div>Q3</div> 
      <div>Q4</div> 
    </div> 
  </body> 
</html>

ব্যাখ্যা: align-items: stretch ডিফল্ট আচরণ। আইটেমগুলোর নিজস্ব উচ্চতা না থাকলে (অথবা height: auto থাকলে) সেগুলো কন্টেইনারের ২০০পিক্সেল উচ্চতা পর্যন্ত ফেলে যাবে। margin স্পেস বাদ দিয়ে।