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

Giá trị flex-start của align-content đặt các flex lines (các hàng) ở đầu container dọc trục cross-axis. Đây là hành vi mặc định khi container không có height xác định.

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

• display: flex + flex-wrap: wrap
• Container có height/min-height > tổng chiều cao lines
• Có nhiều dòng (multi-line)

Ví dụ: align-content: flex-start

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

So sánh align-content values (Container 200px, 3 lines × 60px = 180px, Gap 20px = 200px total → 0 remaining)

Giả sử container cao hơn: 300px, 3 lines = 180px, remaining = 120px

flex-start:     | Line1 | Line2 | Line3 | 120px空白 |
flex-end:       | 120px空白 | Line1 | Line2 | Line3 |
center:         | 60px | Line1 | Line2 | Line3 | 60px |
space-between:  | Line1 | 60px | Line2 | 60px | Line3 |
space-around:   | 30px | Line1 | 60px | Line2 | 60px | Line3 | 30px |
stretch:        | Line1(100px) | Line2(100px) | Line3(100px) | (chia đều 120px)

Khi nào dùng flex-start?

• Layout thông thường: nội dung dồn lên trên
• Khi không muốn khoảng cách thừa ở trên
• Kết hợp justify-content: flex-start cho top-left alignment

Lưu ý

• Mặc định khi container không có height (auto height)
• Chỉ tác dụng khi flex-wrap: wrap và nhiều dòng
• Single line: dùng align-items: flex-start
• Trong Grid Layout: align-content: start (tương tự)