CSS flex-grow প্রোপার্টি দিয়ে ফ্লেক্স আইটেম বড় করুন

flex-grow প্রোপার্টি একটি ফ্লেক্স আইটেম কতটুকু বড় হবে তা নির্ধারণ করে। এটি একটি ইউনিটহীন সংখ্যা গ্রহণ করে, যা আপেক্ষিক অনুপাত বোঝায়।

উদাহরণ

নিচের কোডটি চালিয়ে flex-grow প্রোপার্টির ব্যবহার দেখুন। এখানে Q3 ফ্লেক্স-আইটেম অন্যগুলোর চেয়ে বড়:

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      .mycontainer { 
        display: flex; 
        background-color: orange; 
        align-content: space-between; 
      } 
      .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 style="flex-grow: 1">Q1</div> 
      <div style="flex-grow: 1">Q2</div> 
      <div style="flex-grow: 20">Q3</div> 
      <div style="flex-grow: 1">Q4</div> 
      <div style="flex-grow: 1">Q5</div> 
    </div> 
  </body> 
</html>

ব্যাখ্যা: Q3-তে flex-grow: 20 দেওয়ায় এটি বাকি আইটেমগুলোর (flex-grow: 1) ২০ গুণ বেশি স্পেস chiếm করবে। মোট ফ্রি স্পেস অনুপাত অনুযায়ী বণ্টন হয়।