CSS justify-content দিয়ে ফ্লেক্স আইটেম হরিজেন্টালি এলাইন করুন

justify-content প্রোপার্টি ফ্লেক্স আইটেমগুলোর মেইন-অক্ষ (হরিজেন্টাল) দিয়ে বিন্যাস নিয়ন্ত্রণ করে, যখন আইটেমগুলো সব স্পেস ব্যবহার করে না।

উদাহরণ

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

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      .mycontainer { 
        display: flex; 
        background-color: blue; 
        justify-content: center; 
      } 
      .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> 
  </body> 
</html>

ব্যাখ্যা: ৪টি আইটেম মোট ৪০০পিক্সেল + মার্জিন занима করে। কন্টেইনারের প্রস্থ বেশি থাকলে justify-content: center সেগুলকে হরিজেন্টাল মাঝপথে নিয়ে আসে। অন্যান্য মান: flex-start, flex-end, space-between, space-around, space-evenly।