CSS align-items Property

CSS align-items property aligns the flex items along the cross axis(vertical by default) within the flex container.

In the example below, we have used align-items:center;. This means that all the flex items will be aligned at the center of the cross axis. As cross axis is vertical by default. Therefore, all the flex items will be vertically centered within their flex container.

Example:

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

The align-items: flex-start; aligns the flex items at the beginning of the cross-axis. As cross-axis is vertical by default. Therefore, all the flex items will be aligned at the top of the flex container. See the example below:

Example:

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

The align-items: flex-end; aligns the flex items at the end of the cross-axis. As cross-axis is vertical by default. Therefore, all the flex items will be aligned at the bottom of the flex container. See the example below:

Example:

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

The align-items: baseline; aligns the flex items at their baseline. The baseline is a hypothetical horizontal line upon which all the letters sit. So all the flex items will be aligned taking this line as a reference. See the example below:

Example:

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

The align-items: stretch; stretches all the flex items to the full length of the cross-axis. As cross-axis is vertical by default. Therefore, all the flex items stretch to cover the full height of their flex container. See the example below:

Example:

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

CSS Syntax

The align-items property has the following syntax:

align-items: flex-start|flex-end|center|baseline|stretch|initial|inherit;

Property Values

The align-items property accepts the following values:

General Info