CSS align-content Property

CSS align-content Property

The align-content property in CSS controls how multiple rows in a flexbox or grid container are aligned along the cross-axis (vertical axis in flexbox)** when there's extra space. It only affects containers with multiple lines (e.g., flex-wrap: wrap; in flexbox).

1. Syntax

selector {
  align-content: value;
}

2. Accepted Values

Value	Description
stretch (default)	Stretch rows to fill available space.
flex-start	Aligns rows at the top of the container.
flex-end	Aligns rows at the bottom of the container.
center	Centers rows vertically.
space-between	Distribute rows evenly, with no space at the edges.
space-around	Distribute rows with equal space around them.
space-evenly	Distribute rows with equal space between and at the edges.

3. Example – align-content in Flexbox

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

.box {
  width: 100px;
  height: 50px;
  background: red;
  margin: 5px;
}

✅ Rows of .box elements are centered vertically.

4. Example – align-content in CSS Grid

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 300px;
  align-content: space-between;
}

.grid-item {
  background: blue;
  padding: 20px;
}

✅ Rows are evenly spaced with no gaps at the top or bottom.

5. Difference Between align-items & align-content

Property	Effect
align-items	Aligns individual items along the cross-axis.
align-content	Aligns multiple rows within the container.

✅ Use align-items when there's only one row.
✅ Use align-content when there are multiple rows.

6. Best Practices

✔ Works only when there's extra space in the container.
✔ Use with flex-wrap: wrap; to see its effect in Flexbox.
✔ Combine with justify-content for full control over alignment.