Align Content in CSS

From the CSS Flexbox cheat sheet · Alignment · verified Jul 2026

Align Content

Align and distribute wrapped lines of flex items within the container

css
.container {
  align-content: stretch;       /* stretch lines */
  align-content: flex-start;    /* pack at start */
  align-content: flex-end;      /* pack at end */
  align-content: center;        /* center lines */
  align-content: space-between; /* space between */
}
html
<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>
📦 Aligns wrapped lines
⚠️ Only works with flex-wrap: wrap
💡 Similar to justify-content

More CSS tasks

Back to the full CSS Flexbox cheat sheet