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

Thuộc tính align-self cho phép ghi đè căn chỉnh dọc (cross-axis) cho một flex item cụ thể, thay vì áp dụng cho tất cả như align-items.

Cú pháp

.flex-item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      height: 300px;
      background-color: #e67e22;
      align-items: flex-start; /* Mặc định cho tất cả */
      padding: 10px;
      gap: 10px;
    }
    .mycontainer > div {
      background-color: white;
      text-align: center;
      line-height: 90px;
      font-size: 40px;
      width: 100px;
      border-radius: 4px;
    }
    .special {
      align-self: center; /* Chỉ item này căn giữa dọc */
      background-color: #2ecc71;
      color: white;
    }
  </style>
</head>
<body>
  <h1>Quiz</h1>
  <div class="mycontainer">
    <div>Q1</div>
    <div>Q2</div>
    <div>Q3</div>
    <div class="special">Q4</div>
    <div>Q5</div>
  </div>
</body>
</html>

Các giá trị align-self

Giá trị	Hiệu ứng
`auto`	Kế thừa từ align-items của container (mặc định)
`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 của text
`stretch`	Kéo giãn lấp đầy chiều cao container

Ứng dụng thực tế

.card-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch; /* Mặc định: card bằng nhau cao */
}
.card-featured {
  align-self: center; /* Card nổi bật: căn giữa, không stretch */
  transform: scale(1.05);
  z-index: 1;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

Lưu ý

Chỉ hoạt động trên flex items (con trực tiếp của flex container)
Ghi đè align-items của container
Không tác dụng nếu container không phải flex/grid
Trong Grid Layout, align-self cũng hoạt động tương tự