CSS align-content Property

What You’ll Learn

The align-content property controls how multiple lines in a flex container, or multiple tracks in a grid container, are distributed along the cross axis when extra space is available. It is a layout property that helps you position whole rows or tracks, not individual items inside one row.

Definition and Usage

The align-content CSS property sets how a flex container’s lines are aligned within the flex container when there is extra space on the cross axis. In a grid container, it does the same job for grid tracks.

Think of it this way: if a flex container wraps items into multiple rows, align-content decides where those rows sit inside the container’s height. It does not align one item inside a row — that is the job of align-items.

📝 Syntax

Apply align-content to a flex or grid container:

.container {
  align-content: value;
}

Basic Flexbox Example

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

Syntax Rules

• Apply align-content to a flex or grid container, not to individual items.
• In flexbox, the container usually needs flex-wrap: wrap and a cross-axis size such as height.
• It only has a visible effect when there is extra cross-axis space and more than one line or track.
• Use keyword values like center, space-between, and space-evenly.

Default Value

The initial value of align-content is stretch. When extra cross-axis space exists, lines or tracks stretch to fill that space.

💎 Property Values

These keyword values control how lines or tracks are packed and spaced inside the container.

When align-content Applies

align-content is useful in these situations:

• Flexbox with wrapping — The container uses display: flex, flex-wrap: wrap, and has a defined cross-axis size such as height.
• Multiple flex lines — Items wrap into more than one line, leaving extra space on the cross axis.
• CSS Grid — The grid container has extra space along the block axis and multiple tracks to distribute.
• Not for single-line flex rows — If all items stay on one line, use align-items instead.

align-content vs align-items

Examples Gallery

Try align-content with centered lines, spaced rows, and a grid layout.

<style>
  .container {
    display: flex;
    flex-wrap: wrap;
    height: 200px;
    align-content: center;
    border: 1px solid #000;
  }
  .item {
    flex: 0 0 30%;
    margin: 5px;
    height: 50px;
    background: lightblue;
  }
</style>

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

.card-grid {
  display: flex;
  flex-wrap: wrap;
  height: 240px;
  align-content: space-between;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  min-height: 220px;
  align-content: space-evenly;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 60px);
  height: 260px;
  align-content: center;
  gap: 10px;
}

💡 Best Practices