align-content in CSS Flexbox – How to Layout Flex Lines

align-content specify how browsers should position a flexible container's lines along the flexbox's cross-axis.

note

The align-content property does not affect a flexbox with only one line—for instance, a flexible container with flex-wrap: nowrap. In other words, align-content works only on flexboxes with multiple lines.

The align-content property accepts the following values:

• stretch
• flex-start
• center
• flex-end
• space-between
• space-around
• space-evenly

Let's discuss the seven values.

What Is align-content: stretch in CSS Flexbox?

stretch is align-content's default value. It stretches the flexible container's lines to fill the flexbox's cross-axis.

align-content's stretch value stretches flexbox's lines to fill the container's cross-axis

Here's an example:

CSS

section {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

div {
  border: 1px solid black;
  background-color: purple;
  color: white;
  width: 30px;
  height: 30px;
  padding: 10px;
  border-radius: 5px;
}

HTML

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</section>

Try Editing It

The snippet above used the stretch value to stretch the flexbox's lines to fill the <section>'s cross-axis.

CodeSweetly ads

Use Flexbox like a pro

Learn CSS Flexbox with live examples and images.

Check it out

What Is align-content: flex-start in CSS Flexbox?

flex-start aligns a flexible container's lines with the cross-start edge of the flexbox's cross-axis.

align-content's flex-start value aligns flexbox's lines to the container's cross-start edge

Here's an example:

CSS

section {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

div {
  border: 1px solid black;
  background-color: purple;
  color: white;
  width: 30px;
  height: 30px;
  padding: 10px;
  border-radius: 5px;
}

HTML

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</section>

Try Editing It

The snippet above used the flex-start value to align the flexbox's lines to the cross-start edge of the <section>'s cross-axis.

What Is align-content: center in CSS Flexbox?

center aligns a flexible container's lines to the center of the flexbox's cross-axis.

align-content center value aligns flexbox's lines to the center of the container's cross-axis

Here's an example:

CSS

section {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

div {
  border: 1px solid black;
  background-color: purple;
  color: white;
  width: 30px;
  height: 30px;
  padding: 10px;
  border-radius: 5px;
}

HTML

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</section>

Try Editing It

We used the center value to align the flexbox's lines to the center of the <section>'s cross-axis.

CodeSweetly ads

A slick computer trick that makes mistakes disappear

When in doubt, Undo! Just click Command + Z or Control + Z.

Discover more tech tricks

What Is align-content: flex-end in CSS Flexbox?

flex-end aligns a flexible container's lines with the cross-end edge of the flexbox's cross-axis.

align-content's flex-end value aligns flexbox's lines to the container's cross-end edge

Here's an example:

CSS

section {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

div {
  border: 1px solid black;
  background-color: purple;
  color: white;
  width: 30px;
  height: 30px;
  padding: 10px;
  border-radius: 5px;
}

HTML

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</section>

Try Editing It

We used the flex-end value to align the flexbox's lines to the cross-end edge of the <section>'s cross-axis.

What Is align-content: space-between in CSS Flexbox?

space-between does the following:

• It aligns the flexbox's first line with the main-start edge of the flexible container's main axis.
• It aligns the flexbox's last line with the main-end side of the flexible container's main axis.
• It creates equal spacing between each pair of lines between the first and last line.

align-content's space-between value creates equal spacing between each pair of lines between the first and last line

Here's an example:

CSS

section {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

div {
  border: 1px solid black;
  background-color: purple;
  color: white;
  width: 30px;
  height: 30px;
  padding: 10px;
  border-radius: 5px;
}

HTML

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</section>

Try Editing It

The snippet above used the space-between value to create equal spacing between each pair of lines between the first and last line.

CodeSweetly ads

Master NPM Package Creation

Elevate your skills, boost your projects, and stand out in the coding world.

Learn more

What Is align-content: space-around in CSS Flexbox?

space-around assigns equal spacing to each side of a flexible container's lines.

Therefore, the space before the first line and after the last one is half the width of the space between each pair of lines.

align-content's space-around value assigns equal spacing to each side of a flexbox's lines

Here's an example:

CSS

section {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

div {
  border: 1px solid black;
  background-color: purple;
  color: white;
  width: 30px;
  height: 30px;
  padding: 10px;
  border-radius: 5px;
}

HTML

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</section>

Try Editing It

The snippet above used the space-around value to assign equal spacing to each side of the flexible container's lines.

What Is align-content: space-evenly in CSS Flexbox?

space-evenly assigns even spacing to both ends of a flexible container and between its lines.

align-content's space-evenly value ensures even spacing on both ends of a flexbox and between its lines

Here's an example:

CSS

section {
  display: flex;
  flex-wrap: wrap;
  align-content: space-evenly;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

div {
  border: 1px solid black;
  background-color: purple;
  color: white;
  width: 30px;
  height: 30px;
  padding: 10px;
  border-radius: 5px;
}

HTML

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</section>

Try Editing It

We used the space-evenly value to assign even spacing to both ends of the flexbox and between its lines.

Overview

This article discussed what a CSS align-content property is. We also discussed seven of its values.

Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.

Tweet this article