CSS Align Content

CSS Align Content

The CSS align-content property controls how multiple flex lines are distributed along the cross axis when a wrapping flex container has extra space.

Unlike align-items, which aligns flex items within their individual flex lines, align-content works with the flex lines themselves. It is useful only when wrapping creates multiple flex lines and there is available cross-axis space to distribute.

How align-content Works

The align-content property distributes flex lines along the cross axis of a multi-line flex container.

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

For a row-oriented flex container in a typical horizontal writing mode, the cross axis runs vertically. If wrapping creates several rows, align-content can control how those rows are distributed vertically inside the container.

With a column-oriented flex container, the cross axis normally runs horizontally, so align-content distributes the flex lines horizontally.

When align-content Has an Effect

Two conditions are especially important for seeing the effect of align-content: the flex container must have multiple flex lines, and there must be available space along the cross axis.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  align-content: center;
}

The flex-wrap: wrap declaration allows multiple flex lines to form. The defined height provides cross-axis space in a typical row layout.

If all items remain on a single flex line, align-content does not affect the layout. If the flex lines already fill all available cross-axis space, there may also be little or no extra space to distribute.

align-content Values

Common values for align-content include alignment and space-distribution values.

The initial value of align-content is normal. In a multi-line flex container, normal generally behaves like stretch.

align-content: stretch

The stretch value allows flex lines to expand along the cross axis when their cross size is automatic and extra space is available.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}

The available cross-axis space is distributed among the flex lines, increasing their cross sizes.

This affects the flex lines themselves. Flex items within those lines are still aligned according to properties such as align-items and align-self.

align-content: flex-start

The flex-start value packs the flex lines toward the cross-start side of the container.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

In a row-oriented layout using a typical horizontal writing mode, the flex lines are packed toward the top of the container.

align-content: flex-end

The flex-end value packs the flex lines toward the cross-end side of the container.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}

In a typical row layout, the flex lines appear toward the bottom of the container when extra vertical space is available.

align-content: center

The center value packs the flex lines together in the center of the cross axis.

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

Available cross-axis space is placed before and after the group of flex lines, centering the group inside the container.

align-content: space-between

The space-between value places the first flex line at cross-start and the last flex line at cross-end, then distributes the remaining space between the lines.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

No additional distributed space is placed before the first line or after the last line.

align-content: space-around

The space-around value distributes space around each flex line.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}

Each flex line receives equal space on both sides. As a result, the space between neighboring lines is twice the space between an outer line and the corresponding container edge.

align-content: space-evenly

The space-evenly value distributes available cross-axis space evenly.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-evenly;
}

The spaces between neighboring flex lines and between the outer lines and the container edges are equal.

align-content vs align-items

The difference between align-content and align-items is important when working with wrapping Flexbox layouts.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: space-between;
}

In this example, align-items controls how the items are aligned inside each line, while align-content controls how the lines themselves are distributed inside the container.

Flex Direction and Wrapping

The cross axis depends on flex-direction, so the physical direction affected by align-content can change.

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

With row in a typical horizontal writing mode, the cross axis is vertical.

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

With column, the cross axis follows the inline direction, so the flex lines are distributed horizontally in a typical horizontal writing mode.

The wrap-reverse value also reverses the cross-start and cross-end directions, which affects where flex lines are placed.

CSS Align Content Example

The following example compares common align-content values. Each container wraps its items onto multiple lines and provides extra vertical space so the line distribution is easy to see.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  height: 180px;
}
.center {
  align-content: center;
}
.space-between {
  align-content: space-between;
}
.space-evenly {
  align-content: space-evenly;
}