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

Giá trị space-around của justify-content phân bổ không gian ngang quanh các flex items trên trục chính (main axis): khoảng cách bằng nhau trước item đầu, sau item cuối, và giữa các item.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      background-color: #e74c3c;
      justify-content: space-around;
      padding: 10px;
    }
    .mycontainer > div {
      background-color: #e67e22;
      text-align: center;
      line-height: 60px;
      font-size: 30px;
      width: 100px;
      margin: 5px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>Quiz</h1>
  <div class="mycontainer">
    <div>Q1</div>
    <div>Q2</div>
    <div>Q3</div>
    <div>Q4</div>
  </div>
</body>
</html>

So sánh justify-content values

Giá trị	Hành vi	Khoảng cách
`flex-start`	Dồn về đầu	Không gian ở cuối
`flex-end`	Dồn về cuối	Không gian ở đầu
`center`	Căn giữa	Không gian chia 2 đầu
`space-between`	Item đầu chạm đầu, item cuối chạm cuối	Khoảng cách đều giữa các item
`space-around`	Khoảng cách đều quanh mỗi item	Nửa khoảng cách ở 2 đầu
`space-evenly`	Khoảng cách hoàn toàn đều	Khoảng cách y hệt mọi nơi

Minh họa trực quan space-around

Container: 600px | 4 items × 100px = 400px | Remaining: 200px
space-around: |--25px--| Item |--50px--| Item |--50px--| Item |--50px--| Item |--25px--|
                 ↑ half    ↑ full     ↑ full     ↑ full     ↑ half

Khi nào dùng space-around?

Menu điều hướng muốn khoảng cách thoáng đãng
Gallery ảnh/item muốn breathing room
Khi không muốn item chạm vào mép container

Lưu ý

space-evenly (mới hơn) cho khoảng cách hoàn toàn đều, hỗ trợ tốt trình duyệt hiện đại
Kết hợp với gap (hỗ trợ Flexbox từ Chrome 84+) để quản lý khoảng cách dễ hơn
Trên trục dọc dùng align-content: space-around (cần flex-wrap)