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

Thuộc tính align-items căn chỉnh các flex items dọc theo trục chéo (cross-axis) trong từng dòng. Khác với align-content căn chỉnh các dòng.

Các giá trị

Giá trị	Hiệu ứng
`stretch` (mặc định)	Kéo giãn items lấp đầy chiều cao dòng
`flex-start`	Căn đầu trục cross
`flex-end`	Căn cuối trục cross
`center`	Căn giữa trục cross
`baseline`	Căn theo baseline text

Ví dụ: align-items: center

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

align-items vs align-content vs align-self

Thuộc tính	Áp dụng cho	Khi nào dùng
`align-items`	Tất cả items trong mỗi dòng	Căn dọc items trong hàng đơn
`align-content`	Các dòng (flex lines)	Khi flex-wrap: wrap, căn các hàng
`align-self`	Một item cụ thể	Ghi đè align-items cho 1 item

Khi flex-direction: column

.vertical {
  display: flex;
  flex-direction: column;
  height: 400px;
  align-items: center; /* Căn ngang (trục cross giờ là ngang) */
}

Mẹo: Căn giữa hoàn hảo (trung tâm)

.center-perfect {
  display: flex;
  justify-content: center; /* Trục chính */
  align-items: center;     /* Trục chéo */
  height: 100vh;
}