CSS align-content Property

CSS align-content property aligns the flex lines along the cross axis within their flex container.

Unlike the align-items property, it aligns the flex lines instead of aligning the flex items. A flex line is a hypothetical line which groups flex items into a single line. So, by default, a flex line is same as a row.

The align-content property only works if the flex-wrap: wrap; is present and works efficiently if there are multiple lines of flex items.

In the example below, we have used align-content: center;. This means that all the flex lines 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 the flex container. Try out the example given below:

Example:

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

The align-content: flex-start; aligns the flex lines 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;
  flex-wrap: wrap;
  align-content: flex-start;
}

The align-content: flex-end; aligns the flex lines 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;
  flex-wrap: wrap;
  align-content: flex-end;
}

The align-content: space-between; aligns the flex lines in such a way that the space between any two consecutive flex lines is exactly the same within their container. See the example below:

Example:

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

The align-content: space-around; aligns the flex lines in such a way that the space around each and every flex line is exactly the same within their flex container. See the example below:

Example:

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

The align-content: space-evenly; aligns the flex lines in such a way that the space before(top) and after(bottom) each flex line is same. This means that the remaining space is evenly distributed among the flex lines. See the example below:

Example:

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

The align-content: stretch; is the default. In this case, the flex items stretch along the cross axis to cover its full length. As, by default the cross axis is vertical. Therefore, the flex items stretch vertically to cover the full height of the flex container. See the example below:

Example:

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

CSS Syntax

The align-content property has the following syntax:

align-content: stretch|flex-start|flex-end|center|space-between|space-around|space-evenly|initial|inherit;

Property Values

The align-content property accepts the following values:

General Info