Giá trị stretch của align-content trong CSS Flexbox

Giá trị stretch (mặc định khi container có height) của align-content kéo giãn các flex lines (hàng) để lấp đầy chiều cao container dọc trục cross-axis.

Điều kiện

• display: flex + flex-wrap: wrap
• Container có height hoặc min-height xác định
• Có nhiều dòng (multi-line)
• Items không có align-self ghi đè

Ví dụ: align-content: stretch

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      height: 200px;
      background-color: #e74c3c;
      align-content: stretch;
      flex-wrap: wrap;
      padding: 10px;
      gap: 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>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>

Tính toán stretch

Container: 200px
8 items, 2 items/dòng → 4 lines
Mỗi line height ban đầu: 60px + 10px gap = 70px
4 lines × 70px = 280px > 200px → Không stretch được (overflow)

Nếu container 400px:
400px - 30px gap = 370px cho 4 lines
Mỗi line = 92.5px (stretch từ 70px)

So sánh align-content values

Lưu ý

• Mặc định khi container có height là stretch
• Nếu không set height → hành vi như flex-start
• align-items: stretch (mặc định) kéo giãn items trong dòng
• align-content: stretch kéo giãn các dòng