Giá trị space-around của align-content trong Flexbox

Giá trị space-around của thuộc tính align-content phân bổ không gian dọc quanh các flex lines (các hàng flex items khi wrap) bằng cách đặt khoảng cách bằng nhau trước dòng đầu, sau dòng cuối, và giữa các dòng.

Điều kiện hoạt động

• Container phải có display: flex hoặc inline-flex
• Phải có flex-wrap: wrap (hoặc wrap-reverse)
• Container phải có chiều cao cố định hoặc min-height lớn hơn tổng chiều cao các items

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      height: 200px;
      background-color: #e74c3c;
      align-content: space-around;
      flex-wrap: wrap;
      padding: 10px;
    }
    .mycontainer > div {
      background-color: #f1c40f;
      text-align: center;
      line-height: 60px;
      font-size: 30px;
      width: 100px;
      margin: 5px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>Hàng đợi (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>

So sánh các giá trị align-content

Minh họa trực quan space-around

Container height: 200px
Items: 3 lines × 60px = 180px
Remaining: 20px

space-around: |---10px---| Line1 |---10px---| Line2 |---10px---| Line3 |---10px---|
                ↑ half     ↑ full      ↑ full      ↑ half