Điều chỉnh hành vi flex-wrap bằng align-content

Thuộc tính align-content điều khiển cách phân bố các flex lines (các hàng sau khi wrap) dọc theo trục cross-axis. Nó chỉ có tác dụng khi flex-wrap: wrap hoặc wrap-reverse được bật.

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

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      background-color: #e67e22;
      align-content: space-between;
      height: 150px;
      width: 600px;
      flex-wrap: wrap;
      padding: 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>Q7</div>
    <div>Q8</div>
  </div>
</body>
</html>

Mối quan hệ flex-wrap & align-content

.container {
  display: flex;
  flex-wrap: wrap;        /* Bật wrap để tạo nhiều dòng */
  align-content: center;  /* Căn giữa các dòng dọc trục cross */
  height: 500px;          /* Cần chiều cao container > tổng chiều cao items */
}

Các giá trị align-content phổ biến

• flex-start: Các dòng dồn lên trên (mặc định nếu không set height)
• center: Các dòng ở giữa container
• flex-end: Các dòng dồn xuống dưới
• space-between: Dòng đầu chạm trên, dòng cuối chạm dưới, các dòng giữa cách đều
• space-around: Khoảng cách đều quanh mỗi dòng
• stretch: Kéo giãn các dòng lấp đầy chiều cao (mặc định khi có height)

Ví dụ thực tế: Card Grid căn giữa dọc

.card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;  /* Căn ngang */
  align-content: center;    /* Căn dọc */
  min-height: 100vh;
  gap: 1.5rem;
  padding: 2rem;
}
.card {
  width: 300px;
  flex-shrink: 0;
}

Lưu ý quan trọng

• align-content không tác dụng nếu chỉ có 1 dòng (flex-wrap: nowrap)
• Cần container có chiều cao xác định (height, min-height, hoặc flex trong flex column)
• Khác với align-items (căn items trong một dòng) và justify-content (căn trên trục chính)