The align-self property controls the alignment of a single flex item on the cross axis. It can override the alignment defined by the parent container’s align-items property.

auto is the default value. The item follows the align-items value of its parent.

.container {
  display: flex;
  align-items: center;
}

.item {
  align-self: auto;
}

flex-start moves the selected item to the beginning of the cross axis.

.container {
  display: flex;
  align-items: center;
}

.item-special {
  align-self: flex-start;
}

flex-end moves the selected item to the end of the cross axis.

.container {
  display: flex;
  align-items: center;
}

.item-special {
  align-self: flex-end;
}

center centers the selected flex item on the cross axis.

.container {
  display: flex;
  align-items: flex-start;
}

.item-special {
  align-self: center;
}

stretch allows an individual flex item to stretch across the cross axis when its cross-size is not explicitly defined.

.container {
  display: flex;
  align-items: flex-start;
}

.item-special {
  align-self: stretch;
}

baseline aligns the selected item with the baseline of the other flex items.

.container {
  display: flex;
  align-items: center;
}

.item-special {
  align-self: baseline;
}

In a course layout, the parent can center all elements while one badge or button can be positioned differently using align-self.

.course-card {
  display: flex;
  align-items: center;
  gap: 18px;
}

.course-badge {
  align-self: flex-start;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.item-special {
  align-self: flex-end;
}

With flex-direction: column, the cross axis is horizontal. Therefore, align-self: flex-end moves the selected item toward the right side.