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

Giá trị flex-end của align-items căn chỉnh các flex items về cuối trục chéo (cross-axis) - tức là dưới cùng khi flex-direction: row.

Ví dụ: align-items: flex-end

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      height: 300px;
      background-color: #e74c3c;
      align-items: flex-end;
      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>Quiz</h1>
  <div class="mycontainer">
    <div>Q1</div>
    <div>Q2</div>
    <div>Q3</div>
    <div>Q4</div>
  </div>
</body>
</html>

Khi flex-direction: column

.vertical-end {
  display: flex;
  flex-direction: column;
  width: 300px;
  align-items: flex-end; /* Căn PHẢI (cross axis = ngang) */
}

So sánh align-items values (flex-direction: row)

Ứng dụng thực tế

/ * Footer luôn dưới cùng * /
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.main {
  flex: 1;
}
.footer {
  align-self: flex-end; /* Hoặc container align-items: flex-end */
}

/* Button group căn dưới */
.action-bar {
  display: flex;
  height: 100px;
  align-items: flex-end;
  gap: 1rem;
  padding: 1rem;
}

Kết hợp với align-self

.items {
  display: flex;
  height: 200px;
  align-items: flex-end; /* Mặc định: tất cả dưới */
}
.item-special {
  align-self: center; /* Item này giữa */
}