Align-Content for Multi-Line Flex Containers

If you’ve started learning CSS Flexbox, you might already know how to line things up in a row. But what happens when your flex items wrap onto multiple lines? That’s where align-content comes in.

In this beginner-friendly guide, you’ll learn:

• What align-content is
• When it actually works (and when it doesn’t!)
• How to use it with simple, copy‑paste code examples
• How to experiment and see the changes for yourself

By the end, you’ll be able to control the spacing between rows (or columns) in your flex layouts.

---

1. First, a quick Flexbox refresher

Before we touch align-content, we need a basic flex container.

A flex container is just a normal element (like a <div>) with display: flex. Inside it, any child elements become flex items.

Here’s a simple starting point:

<!-- Example 1: Basic flex container -->
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

.container {
  display: flex;          /* Turn this into a flex container */
  border: 2px solid #333; /* Just so we can see the box */
}

.item {
  background: #4f8cff;    /* Blue background */
  color: white;           /* White text */
  padding: 10px;          /* Space inside each box */
  margin: 5px;            /* Space outside each box */
}

If you open this in a browser (inside a full HTML page), you’ll see all six items in one row.

So far, there’s only one line of items. align-content still doesn’t do anything yet. Let’s fix that.

---

2. Make items wrap onto multiple lines

align-content only works when you have more than one line of flex items. To create multiple lines, you must allow items to wrap.

Add flex-wrap: wrap to your container:

.container {
  display: flex;
  flex-wrap: wrap;        /* Allow items to move to a new line */
  border: 2px solid #333;
  width: 400px;           /* Fix a width so we can see wrapping */
}

Now, because the container’s width is limited to 400px, some items will move to the next line when there’s not enough horizontal space.

You should see multiple rows of boxes. Perfect! Now we’re ready for align-content.

---

3. What does align-content actually do?

Think of align-content as:

“How should I distribute the space between the rows (or columns) inside my flex container?”

Important details:

• It affects multiple lines of items (rows or columns)
• It does nothing if there is only one line
• It works on the cross axis (the opposite direction of the main flex direction)

If your flex direction is:

• row → cross axis is vertical (top to bottom)
• column → cross axis is horizontal (left to right)

We’ll start with the default flex-direction: row, so align-content will control how the rows are spaced vertically.

---

4. Example 2: Playing with align-content values

Let’s extend our CSS and try different align-content values. We’ll give the container a fixed height so we can see the extra space.

.container {
  display: flex;
  flex-wrap: wrap;        /* Multiple lines */
  border: 2px solid #333;
  width: 400px;
  height: 250px;          /* Extra height to create free space */
}

Now let’s try different settings one by one.

4.1 align-content: flex-start

.container {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  height: 250px;
  border: 2px solid #333;
  align-content: flex-start; /* Pack rows at the top */
}

What you’ll see:

• All rows stick to the top of the container
• Any extra vertical space is left below the rows

4.2 align-content: flex-end

.container {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  height: 250px;
  border: 2px solid #333;
  align-content: flex-end; /* Pack rows at the bottom */
}

What you’ll see:

• All rows stick to the bottom of the container
• Extra space appears above the rows

4.3 align-content: center

.container {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  height: 250px;
  border: 2px solid #333;
  align-content: center;   /* Center rows vertically */
}

What you’ll see:

• The group of rows is centered vertically
• Space is shared above and below the rows

4.4 align-content: space-between

.container {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  height: 250px;
  border: 2px solid #333;
  align-content: space-between; /* Spread rows with space only between */
}

What you’ll see:

• First row sticks to the top
• Last row sticks to the bottom
• Any other rows (in between) are evenly spaced in the middle

4.5 align-content: space-around

.container {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  height: 250px;
  border: 2px solid #333;
  align-content: space-around; /* Space on top, between, and bottom */
}

What you’ll see:

• Rows have space above and below them
• The space between rows is larger than the space at the very top and bottom

4.6 align-content: space-evenly

.container {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  height: 250px;
  border: 2px solid #333;
  align-content: space-evenly; /* Equal space everywhere */
}

What you’ll see:

• Equal space at the top, between every row, and at the bottom

---

5. Important: align-content vs align-items

These two are easy to mix up:

• align-items → how items in a single row line up (top, center, bottom)
• align-content → how multiple rows are spaced on the cross axis

If you only have one line of items, align-content won’t do anything. Use align-items instead.

Quick mental check:

• One row? → align-items
• Multiple rows? → align-content

---

6. Example 3: Switch to column direction

align-content also works when the main direction is a column instead of a row. Then it controls spacing horizontally.

Update your container like this:

.container {
  display: flex;
  flex-direction: column;  /* Stack items top to bottom */
  flex-wrap: wrap;         /* Now they can wrap into new columns */
  width: 400px;
  height: 250px;
  border: 2px solid #333;
  align-content: center;   /* Center the columns horizontally */
}

.item {
  background: #4f8cff;
  color: white;
  padding: 10px;
  margin: 5px;
}

What you’ll see:

• Items go downward first, then wrap into a new column when there’s no more height
• align-content: center will center those columns horizontally inside the container

Try changing align-content to space-between, flex-start, or flex-end again and watch how the columns move.

---

7. Try it yourself: a small experiment

Here’s a simple exercise to help this stick.

1. Create an HTML file with the Example 1 HTML and CSS
2. Make sure you have:
   • display: flex;
   • flex-wrap: wrap;
   • A fixed width and height on the container
3. Change only the align-content value every few seconds
4. After each change, refresh your browser and observe:
   • Do the rows move up, down, or center?
   • Is the empty space at the top, bottom, or both?

If something doesn’t change the way you expect, that’s normal. Learning code is partly about trying things and noticing what surprises you.

---

8. Common problems (and how to fix them)

Problem 1: “align-content doesn’t do anything!”
Check:

• Do you have flex-wrap: wrap;?
• Do you have more than one row or column of items?
• Does the container have extra space (a fixed height or width)?

Problem 2: “align-items and align-content confuse me.”
Remember:

• align-items → affects items inside a single row
• align-content → affects the rows themselves

Problem 3: “Items don’t wrap even with flex-wrap: wrap.”
Try:

• Setting a fixed width on the container (e.g., width: 400px;)
• Making items wider (e.g., flex: 0 0 120px;) so wrapping is forced

---

9. Quick recap and what’s next

You’ve just taken a big step into more advanced Flexbox layouts. Here’s what to remember:

• align-content controls spacing between lines of flex items
• It only works when you have multiple lines and extra space on the cross axis
• Common values: flex-start, flex-end, center, space-between, space-around, space-evenly
• Don’t confuse it with align-items, which works on items in a single line

If you got this far and things are still a bit fuzzy, that’s okay. Flexbox takes practice.

Next steps you can try:

• Mix align-content with justify-content to control both directions
• Build a simple photo gallery with wrapping rows and experiment with spacing
• Add more items and see how your layout adjusts automatically

Every small experiment you do makes these concepts easier. Keep tweaking, keep refreshing your browser, and celebrate each layout that looks a little better than the last.