CSS flex শর্টহ্যান্ড প্রোপার্টি (flex-grow, flex-shrink, flex-basis)

flex শর্টহ্যান্ড প্রোপার্টি flex-grow, flex-shrink এবং flex-basis একসাথে সেট করতে দেয়। সিনট্যাক্স: flex: <grow> <shrink> <basis>।

উদাহরণ

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

<!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 style="flex: 20 0 350px">Q4</div> 
      <div>Q5</div> 
      <div>Q6</div> 
      <div>Q7</div> 
      <div>Q8</div> 
      <div>Q9</div> 
    </div> 
  </body> 
</html>

ব্যাখ্যা: Q4-তে flex: 20 0 350px মানে: flex-grow: 20, flex-shrink: 0 (ছোট হবে না), flex-basis: 350px (প্রাথমিক প্রস্থ ৩৫০পিক্সেল)। এটি Q4-কে অন্যগুলোর চেয়ে অনেক বড় করে দেবে।