How to Use align-content in CSS: Syntax and Examples

The align-content property in CSS controls the spacing and alignment of multiple rows or columns inside a flex or grid container when there is extra space. It only works when the container has multiple lines (wrapped flex items or grid rows). You set it with values like stretch, center, or space-between to adjust how lines are placed along the cross axis.

Syntax

The align-content property accepts several keyword values that define how multiple lines inside a flex or grid container are spaced and aligned along the cross axis (vertical in a row flex container).

• stretch: Lines stretch to fill the container (default).
• center: Lines are packed in the center.
• flex-start: Lines are packed toward the start.
• flex-end: Lines are packed toward the end.
• space-between: Lines are evenly spaced with first and last at edges.
• space-around: Lines are evenly spaced with equal space around them.
• space-evenly: Lines are evenly spaced with equal space between and around.

This property only works if the container has multiple lines (e.g., flex-wrap: wrap; is set).

css

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

Example

This example shows a flex container with wrapped items. The align-content property is set to space-between to spread the rows evenly along the vertical axis.

css

html, body {
  height: 300px;
  margin: 0;
}
.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  width: 200px;
  border: 2px solid #333;
  align-content: space-between;
  background-color: #f0f0f0;
}
.item {
  flex: 0 0 80px;
  background-color: #4CAF50;
  margin: 5px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  border-radius: 4px;
}

Output

<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>

Common Pitfalls

1. No effect without multiple lines: align-content only works if the flex or grid container has multiple lines. If flex-wrap is nowrap, it does nothing.

2. Confusing with align-items: align-items aligns items within a single line, while align-content aligns multiple lines.

3. Not for single-line containers: If your container has only one row or column, use align-items instead.

css

/* Wrong: no wrap, align-content has no effect */
.container {
  display: flex;
  flex-wrap: nowrap;
  height: 200px;
  align-content: center; /* No effect here */
}

/* Right: enable wrap for align-content to work */
.container {
  display: flex;
  flex-wrap: wrap;
  height: 200px;
  align-content: center; /* Works now */
}

Quick Reference

Use this quick guide to remember align-content values:

Value	Effect
stretch	Lines stretch to fill container (default)
center	Lines packed in center with equal space above and below
flex-start	Lines packed toward start of cross axis
flex-end	Lines packed toward end of cross axis
space-between	Lines evenly spaced, first and last at edges
space-around	Lines evenly spaced with equal space around each line
space-evenly	Lines evenly spaced with equal space between and around lines

Key Takeaways

Use align-content to control spacing of multiple flex or grid lines along the cross axis.

It only works when the container has multiple lines, so set flex-wrap: wrap; or use grid with multiple rows.

Common values include stretch, center, and space-between to adjust line distribution.

Do not confuse align-content with align-items; the latter aligns items within a single line.

If your container has only one line, align-content will have no effect.