CSS align-content: space-around দিয়ে ফ্লেক্স লাইন চারপাশে স্পেস দেখান

align-content: space-around মান ফ্লেক্স লাইনগুলোর চারপাশে সমান স্পেস যোগ করে। প্রথম এবং শেষ লাইনের কন্টেইনারের বর্ডারের সাথে স্পেস অন্যান্য গ্যাপের অর্ধেক হয়। flex-wrap: wrap থাকতে হয়।

উদাহরণ

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

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      .mycontainer { 
        display: flex; 
        height: 200px; 
        background-color: #884EA0; 
        align-content: space-around; 
        flex-wrap: wrap; 
      } 
      .mycontainer > div { 
        background-color: #00FF00; 
        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>Q5</div> 
      <div>Q6</div> 
      <div>Q7</div> 
      <div>Q8</div> 
    </div> 
  </body> 
</html>

ব্যাখ্যা: ৮টি আইটেম ২ লাইনে ভাগ হয়েছে। align-content: space-around প্রতিটি লাইনের উপরে এবং নিচে সমান স্পেস (প্রায় ৩৩পিক্সেল) যোগ করেছে। প্রথম লাইনের উপরের স্পেস এবং শেষ লাইনের নিচের স্পেস মাঝপথের গ্যাপের অর্ধেক।