CSS

CSS

🎯 CSS align-content Property

The align-content CSS property is used in Flexbox to control how multiple rows are distributed along the vertical axis inside a container.

It only works when there are multiple rows (usually when flex-wrap is enabled).

  • 📌 Important Note

  • align-content works only when there are multiple flex rows.
  • If there is only one row, use align-items instead.

🔹 align-content Syntax

CSS

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

🔹 align-content Values

1️⃣ stretch

Rows stretch to fill the container height.

2️⃣ center

Rows are centered vertically inside the container.

3️⃣ flex-start

Rows are aligned at the top of the container.

4️⃣ flex-end

Rows are aligned at the bottom of the container.

5️⃣ space-between

Rows are distributed evenly with space between them.

6️⃣ space-around

Rows have equal space around them.

7️⃣ initial

Resets the property to default (usually stretch).

🧩 Example Usage

CSS

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

.item {
    width: 100px;
    height: 50px;
    margin: 5px;
}

In this example, multiple rows are distributed evenly inside the container.

  • ✔️ Quick Summary

  • stretch → Rows fill the container
  • center → Rows are centered
  • flex-start → Rows align to top
  • flex-end → Rows align to bottom
  • space-between → Space distributed between rows
  • space-around → Space distributed around rows
CSS align-self
CSS justify-content