Thuộc tính align-content trong CSS Flexbox

Thuộc tính align-content căn chỉnh các flex lines (các hàng) dọc theo trục chéo (cross-axis) khi container có flex-wrap: wrap và chiều cao lớn hơn tổng chiều cao các items.

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

display: flex hoặc inline-flex
flex-wrap: wrap hoặc wrap-reverse
Container có chiều cao xác định (height, min-height, hoặc flex item trong column flex)
Có nhiều dòng (single line: dùng align-items)

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

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      background-color: #e74c3c;
      align-content: space-between;
      height: 150px;
      width: 600px;
      flex-wrap: wrap;
      padding: 10px;
      gap: 10px;
    }
    .mycontainer > div {
      background-color: white;
      text-align: center;
      line-height: 40px;
      font-size: 25px;
      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>Q5</div>
    <div>Q6</div>
  </div>
</body>
</html>

Các giá trị align-content

Giá trị	Hành vi
`flex-start`	Các dòng dồn lên đầu (mặc định nếu không set height)
`flex-end`	Các dòng dồn xuống cuối
`center`	Các dòng căn giữa dọc
`space-between`	Dòng đầu chạm đầu, dòng cuối chạm cuối, giữa cách đều
`space-around`	Khoảng cách đều quanh mỗi dòng
`space-evenly`	Khoảng cách hoàn toàn đều (hiện đại)
`stretch`	Kéo giãn các dòng lấp đầy (mặc định khi có height)

align-content vs align-items

.container {
  display: flex;
  flex-wrap: wrap;
  height: 400px;
}
align-content: space-between; /* Căn các DÒNG */
align-items: center;          /* Căn items TRONG mỗi dòng */

Lưu ý

Không tác dụng nếu flex-wrap: nowrap (mặc định)
Khác với Grid: Grid dùng align-content cho track alignment
gap ảnh hưởng đến tính toán khoảng cách