Giá trị baseline của align-items trong CSS Flexbox

Giá trị baseline của align-items căn chỉnh các flex items theo baseline (đường cơ sở) của text dòng đầu tiên. Hữu ích khi items có font-size khác nhau.

Ví dụ: align-items: baseline

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      height: 200px;
      background-color: #e74c3c;
      align-items: baseline;
      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;
    }
    .mycontainer > div:nth-child(2) { font-size: 20px; }
    .mycontainer > div:nth-child(3) { font-size: 40px; }
  </style>
</head>
<body>
  <h1>Queue</h1>
  <div class="mycontainer">
    <div>Q1</div>
    <div>Q2</div>
    <div>Q3</div>
    <div>Q4</div>
  </div>
</body>
</html>

Baseline là gì?

Baseline là đường ngầm chạy qua chân các chữ cái (không tính phần đuôi như g, j, p, q). Khi align-items: baseline, các item sẽ căn dòng chữ đầu tiên trên cùng một đường.

So sánh baseline vs center vs stretch

Giá trị	Hành vi với font-size khác nhau
`baseline`	Căn dòng chữ đầu tiên (text aligned)
`center`	Căn giữa box (text có thể không cân xứng)
`stretch`	Kéo giãn box lấp đầy (text vẫn baseline trong box)
`flex-start`	Căn trên box
`flex-end`	Căn dưới box

Ứng dụng thực tế

.form-row {
  display: flex;
  align-items: baseline; /* Label + input căn baseline */
  gap: 1rem;
  margin-bottom: 1rem;
}
.label {
  font-weight: 600;
}
.input {
  flex: 1;
  padding: 0.5rem;
  font-size: 1rem;
}

Lưu ý

Chỉ căn baseline của dòng text đầu tiên trong item
Nếu item không có text, dùng margin edge
Hữu ích cho form layout, inline labels
Trong Grid: align-items: baseline cũng hoạt động