CSS Align Items

CSS Align Items

The CSS align-items property controls the default alignment of flex items along the cross axis of a flex container.

While justify-content works along the main axis, align-items works along the cross axis. This makes it possible to align all flex items toward the start, end, or center of the cross axis, stretch them when appropriate, or align their text baselines.

How align-items Works

The align-items property sets the default cross-axis alignment for the flex items within a flex line.

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

With the default flex-direction: row in a horizontal writing mode, the cross axis normally runs vertically. In that common situation, align-items controls how the items are positioned vertically within the flex line.

If the flex direction changes to column, the cross axis changes with it and align-items commonly controls horizontal alignment instead.

align-items Values

Common values used with align-items include:

The initial value of align-items is normal. In Flexbox, normal generally behaves like stretch for flex items when their cross size is automatic.

align-items: stretch

The stretch value allows eligible flex items to fill the available cross size of the flex line.

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

For a row-oriented flex container with a defined height, items without a fixed height can stretch vertically to fill the flex line.

If an item already has a definite cross size, such as an explicit height in a row layout, that size can prevent the item from stretching to fill the container.

align-items: flex-start

The flex-start value places flex items toward the cross-start side of the flex line.

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

In a typical row layout using a horizontal writing mode, the items appear toward the top of the flex container.

The actual physical side depends on the cross-axis direction rather than always being the top.

align-items: flex-end

The flex-end value places flex items toward the cross-end side of the flex line.

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

In a typical row layout using a horizontal writing mode, the items appear toward the bottom of the flex container.

The item order does not change. Only their alignment along the cross axis changes.

align-items: center

The center value centers the flex items along the cross axis.

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

With a row-oriented container that has extra vertical space, the items are vertically centered within the flex line.

Combining align-items: center with justify-content: center is a common technique for centering flex items along both axes.

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

align-items: baseline

The baseline value aligns flex items so their text baselines line up according to baseline alignment rules.

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

This is useful when flex items contain text with different font sizes or other differences that would make simple top or center alignment visually uneven.

<div class="flex-container">
  <div class="small">Small Text</div>
  <div class="large">Large Text</div>
</div>

The boxes can have different heights while their text baselines remain aligned.

Main Axis and Cross Axis

Understanding the difference between the main axis and cross axis makes the relationship between justify-content and align-items easier to remember.

These axes are controlled by the Flexbox layout rather than being permanently horizontal or vertical.

Flex Direction and Alignment

Changing flex-direction changes the orientation of the main and cross axes.

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

With flex-direction: column in a typical horizontal writing mode, the main axis runs vertically and the cross axis runs horizontally. As a result, align-items: center centers the flex items horizontally.

This is why it is more accurate to think of align-items as cross-axis alignment rather than vertical alignment.

align-items and align-self

The align-items property sets the default cross-axis alignment for all flex items in the container.

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

The align-self property can override that alignment for an individual flex item.

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

The Align Self tutorial later in this Flexbox section covers individual item alignment in detail.

align-items and align-content

The align-items and align-content properties both work along the cross axis, but they control different parts of a Flexbox layout.

A single-line flex container can use align-items, but align-content does not affect a single-line flex container.

CSS Align Items Example

The following example compares stretch, flex-start, flex-end, center, and baseline. Open the example in the editor and change the values to see how each one affects cross-axis alignment.

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