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

Giá trị space-between của justify-content đặt item đầu tiên chạm đầu trục chính, item cuối cùng chạm cuối trục chính, và phân bổ khoảng cách đều nhau giữa các item.

Ví dụ: justify-content: space-between

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      background-color: #e74c3c;
      justify-content: space-between;
      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>

Minh họa trực quan

Container: 600px | 4 items × 100px = 400px | Remaining: 200px
space-between: | Item1 |===66.6px===| Item2 |===66.6px===| Item3 |===66.6px===| Item4 |
                ↑ start              ↑ space           ↑ space           ↑ end

So sánh space-between vs space-around vs space-evenly

Giá trị	Đầu/Cuối	Giữa items
`space-between`	Chạm mép (0)	Khoảng cách đều
`space-around`	Nửa khoảng cách	Khoảng cách đều
`space-evenly`	Khoảng cách đầy đủ	Khoảng cách y hệt (cùng 2 đầu)

Ứng dụng kinh điển: Header Layout

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}
.logo { /* Tự động sát trái */ }
.nav { /* Tự động sát phải */ }

Lưu ý

Chỉ có hiệu quả khi ≥ 2 items và có không gian thừa
1 item: tương đương flex-start
Kết hợp gap (modern) để thêm khoảng cách cơ sở
Trên trục dọc (column): dùng align-content: space-between (cần wrap)