CSS align-content: space-around - फ्लेक्स लाइन्स के चारों ओर स्पेस

align-content: space-around फ्लेक्स कंटेनर में एक से अधिक लाइन होने पर, प्रत्येक फ्लेक्स लाइन के चारों ओर समान स्पेस वितरित करता है। पहली और अंतिम लाइन के किनारों पर भी आधा स्पेस होता है।

उदाहरण: space-around के साथ फ्लेक्स लाइन्स

flex-wrap: wrap के साथ कई लाइनें बनती हैं, और align-content: space-around उन्हें कंटेनर में वितरित करता है।

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      height: 200px;
      background-color: red;
      align-content: space-around;
      flex-wrap: wrap;
    }
    .mycontainer > div {
      background-color: yellow;
      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 के मान

नोट

align-content केवल तभी काम करता है जब flex-wrap: wrap हो और एक से अधिक लाइनें हों।