Mastering Flexbox Align-Content: When and How It Works

Background

When building projects that heavily use CSS flex layouts, developers often rely only on flex-direction, justify-content and align-items. This limited usage can cause images to be squeezed, which can be prevented with flex-shrink: 0. The author narrates a dialogue between two personas, Jerry and Tom, debating whether to explore other flex properties.

鄢栋：coder & game player。爱健身，爱自由， 自律得(二声)自由。

Flex Container Property – align-content

The article references Ruan Yifeng’s excellent flex layout guide and introduces align-content, noting that without hands‑on practice it’s like watching a fitness video without exercising.

Ruan defines align-content as the alignment of multiple flex lines; it has no effect when there is only a single line.

To see the property in action, the author sets up a container with explicit layout direction and multiple items.

<div class="flex-container">
  <div class="flex-item flex-item-1">1</div>
  <div class="flex-item flex-item-1">1</div>
  <div class="flex-item flex-item-2">2</div>
  <div class="flex-item flex-item-2">2</div>
  <div class="flex-item flex-item-3">3</div>
  <div class="flex-item flex-item-3">3</div>
  <div class="flex-item flex-item-4">4</div>
  <div class="flex-item flex-item-4">4</div>
  <div class="flex-item flex-item-5">5</div>
  <div class="flex-item flex-item-5">5</div>
</div>

Horizontal Main Axis (flex-direction: row)

.flex-container {
  height: 400px;
  display: flex;
  flex-flow: row wrap; /* must define a direction to create multiple lines */
  align-content: flex-end; /* change this value to see different effects */
  background: gray;
}
.flex-item {
  white-space: nowrap;
  margin-right: 10px;
  margin-bottom: 10px;
  text-align: end;
}
.flex-item-1, .flex-item-3 {
  width: 60px;
  height: 80px;
  background: lightcoral;
}
.flex-item-2, .flex-item-4 {
  width: 90px;
  height: 40px;
  background: lightblue;
}
.flex-item-5 {
  width: 105px;
  height: 20px;
  background: lightgreen;
}

align-content: flex-start

align-content: flex-end

align-content: center

align-content: space-around

align-content: space-between

align-content: stretch (no effect)

When the stretch value does not work, the author discovers that the items have explicit heights, preventing stretch. Removing the heights or setting them to auto enables the stretch effect.

Item height set to auto – stretch works

Vertical Cross Axis (flex-direction: column)

align-content: flex-start

align-content: flex-end

align-content: center

align-content: space-around

align-content: space-between

align-content: stretch

Summary

After experimenting, Tom discovers the conditions for align-content to take effect:

If the layout direction is horizontal ( flex-direction: row)

The effect of align-content appears on the vertical axis.

To make align-content: stretch work, remove the explicit height of the flex items or set it to auto.

If the layout direction is vertical ( flex-direction: column)

The effect of align-content appears on the horizontal axis.

To make align-content: stretch work, remove the explicit width of the flex items or set it to auto.

Tom shares his new knowledge with Jerry, encouraging further exploration of flex properties.