The align-items property defines how flex items are aligned on the cross axis of a flex container.

stretch makes flex items stretch across the cross axis when their cross-size is not explicitly defined.

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

flex-start places the flex items at the beginning of the cross axis.

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

flex-end moves the flex items to the end of the cross axis.

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

center places the flex items in the center of the cross axis. This is one of the most commonly used Flexbox values.

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

baseline aligns flex items according to their text baselines. It is particularly useful when items contain text with different font sizes.

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

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

With flex-direction: row, the cross axis is vertical. Therefore, align-items: center vertically centers the items.

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

When the direction is column, the cross axis becomes horizontal. Therefore, align-items: center centers the items horizontally.

A common website layout uses align-items: center to vertically align an icon, title, and button inside a horizontal card.

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

.course-icon {
  width: 70px;
  height: 70px;
}