The align-content property distributes extra space between multiple wrapped lines of flex items along the cross axis, only having any effect when flex-wrap has produced more than one line.

Syntax

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

Deep Dive Course

align-content is easily confused with align-items, but it operates on an entirely different level: align-items aligns individual items within their own line along the cross axis, while align-content instead distributes space between multiple wrapped lines as a group, relative to the container's overall cross-axis size — this means align-content has no visible effect at all on a flex container with flex-wrap: nowrap, or one whose items all happen to fit on a single line even with wrapping enabled, since there's only one line and therefore no inter-line space to distribute in the first place.

1Understanding Align-content

💡

align-content only has a visible effect when a flex container's items have actually wrapped onto multiple lines via flex-wrap: wrap — on a single-line flex container, whether by nowrap or simply because everything fits on one line anyway, align-content has nothing to do and produces no visible effect.

editor.html

.gallery {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  height: 400px;
}

localhost:3000

2Practical Example

Here is a real-world application of Align-content showing how it is used in production CSS code.

editor.html

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

/* items collectively fit on one line */

localhost:3000

3Best Practices

Follow these guidelines when working with Align-content:

1. Use align-content specifically when a wrapped, multi-line flex container needs its lines distributed with extra space, like space-between, rather than confusing it with align-items, which affects items within a single line

2. Verify flex-wrap is actually producing multiple lines before troubleshooting why align-content doesn't seem to be having any effect

3. Consider CSS Grid instead of a wrapped flex container for genuinely two-dimensional layouts needing both row and column alignment control simultaneously, which align-content alone doesn't fully provide

⚠️

Tip: align-content only has a visible effect when a flex container's items have actually wrapped onto multiple lines via flex-wrap: wrap — on a single-line flex container, whether by nowrap or simply because everything fits on one line anyway, align-content has nothing to do and produces no visible effect.

editor.html

.gallery {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  height: 400px;
}

localhost:3000

Examples

Example 01Basic Usage

.gallery {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  height: 400px;
}

Example 02Advanced Example

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

/* items collectively fit on one line */

Best Practices

Use align-content specifically when a wrapped, multi-line flex container needs its lines distributed with extra space, like space-between, rather than confusing it with align-items, which affects items within a single line
Verify flex-wrap is actually producing multiple lines before troubleshooting why align-content doesn't seem to be having any effect
Consider CSS Grid instead of a wrapped flex container for genuinely two-dimensional layouts needing both row and column alignment control simultaneously, which align-content alone doesn't fully provide

Interview Question

Why does align-content have absolutely no visible effect on a flex container whose items all fit comfortably on a single line, even when flex-wrap: wrap is explicitly set?▼

Hint: Think about specifically what align-content is designed to distribute space between, and whether that thing, multiple lines, genuinely exists yet in this particular scenario.

align-content's entire purpose is to distribute available space specifically between multiple separate lines of wrapped flex items, treating each line as a single unit and positioning those lines relative to each other and to the container's overall cross-axis space — it has no defined role at all in aligning individual items within a single line, that's specifically align-items' job instead. If a flex container's items, even with flex-wrap: wrap explicitly enabled, still happen to all fit comfortably within the width of a single line, no actual wrapping onto a second line ever occurs, meaning there's only ever one single line in existence, and align-content, which needs at least two lines to have any actual space between them to distribute in the first place, simply has nothing left to do, resulting in no visible effect whatsoever regardless of what value it's set to. This is exactly why align-content only becomes meaningfully active once flex-wrap has actually produced genuinely multiple lines to work with, not merely because wrap was set as a possibility.

Exercises

MediumPractice using Align-content in a real scenario.

View Solution

.gallery {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  height: 400px;
}

Frequently Asked Questions

Why does align-content have absolutely no visible effect on a flex container whose items all fit comfortably on a single line, even when flex-wrap: wrap is explicitly set?▼

Related Functions

Flex-wrapAlign-itemsJustify-content