📦 CSS Flexbox Tutorial: align-content

📌 Introduction

The align-content property in Flexbox controls the vertical spacing between rows (or horizontal spacing in column-direction layouts) when there is **extra space along the cross-axis**. It only works when:1) flex-wrap is enabled and 2) multiple rows or columns exist. This makes it different from align-items, which aligns items within a single row. 🎯

🎯 What align-content Controls

  • Controls spacing between flex lines (rows or columns)
  • Works only when flex items wrap
  • Affects all lines as a group
  • Does NOT align individual items — use align-items for that

✨ Syntax

Syntax

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

Note

Important: align-content has no effect when the flex container has a single line. Set flex-wrap: wrap; to see changes.

🧩 Available Values

1. stretch (default)

Flex lines stretch to fill the container.

Code Snippet

align-content: stretch;

2. flex-start

Pack all rows toward the start of the cross-axis.

Code Snippet

align-content: flex-start;

3. flex-end

Pack rows toward the end of the cross-axis.

Code Snippet

align-content: flex-end;

4. center

Center all rows in the container’s cross-axis.

Code Snippet

align-content: center;

5. space-between

Equal space *between* each row; no space at edges.

Code Snippet

align-content: space-between;

6. space-around

Equal space around each row; outer rows get half spacing.

Code Snippet

align-content: space-around;

7. space-evenly

Equal spacing between rows and edges.

Code Snippet

align-content: space-evenly;

🔥 Practical Example

align-content Example

.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  gap: 10px;
  align-content: space-between;
}

.item {
  width: 100px;
  height: 50px;
  background: #60a5fa;
}

📊 Visual Meaning of align-content

ValueEffect on Flex Lines
stretchRows expand to fill space
flex-startRows move to top/left
flex-endRows move to bottom/right
centerRows centered in container
space-betweenEqual space between rows
space-aroundSpace on both sides of rows
space-evenlyEqual spacing everywhere

🧠 Common Mistakes

  • ❌ Using align-content without flex-wrap: wrap
  • ❌ Expecting align-content to align items (use align-items)
  • ❌ Using align-content with only one row (no effect)
>>“align-content manages the space between rows, not the alignment of individual items.” ✨

🎉 Conclusion

The align-content property gives you control over how multiple flex rows or columns are spaced inside a container’s cross-axis. When combined with flex-wrap and gap, it becomes a powerful layout tool for responsive UI grids, galleries, cards, and flexible content blocks. 🚀