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:

stretchThis is the default value. The flex items stretch along the cross axis to cover the full height of the flex container.
flex-startThe flex lines align at the beginning of the flex container.
flex-endThe flex lines align at the end of the flex container.
centerThe flex lines align at the center of the flex container.
space-betweenThe space between any two consecutive flex lines is exactly the same.
space-aroundThe space around each flex line is the same.
space-evenlySpace before(top) and after(bottom) each flex line is exactly the same. This means that the extra space is evenly distributed among the flex linens.
initialSets the align-content property to its default value(stretch).
inheritInherits the align-content property from the parent element.

General Info

Default Valuestretch
InheritedNo
JavaScript Usageelement.style.alignContent = “center”

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment