CSS align-content Property

Definition and Usage

The align-content property packs or spreads the lines of a flex or grid container when there is spare space on the cross axis. In a row flex, that axis is vertical: it decides where the wrapped rows sit inside a tall box.

There must be more than one line, and leftover space, or every keyword looks the same. A flex container also needs flex-wrap: wrap. A single line does nothing. To move items inside one line, use align-items.

CSS Syntax

Property Values

How to Use align-content

Give the container spare space, make more than one line, then pick how those lines share the space.

1. Set display: flex or display: grid on the container.
2. Give it a cross size larger than the lines. For a row flex, that is usually height.
3. On a flex container, set flex-wrap: wrap so items form extra lines. A single line ignores align-content.
4. Set align-content on the container. It is not inherited.

Live Preview

Four items wrap into two lines inside a tall flex box. Change align-content and watch the lines move.

CSS Examples

Each snippet adds only what align-content needs: a container, spare space, and more than one line. Use Try It Yourself for a live editor.

<style>
  section {
    display: flex;
    flex-wrap: wrap;
    height: 180px;
    align-content: center;
    border: 1px solid #ccc;
  }
  div {
    width: 50%;
  }
</style>

<section>
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</section>

<style>
  section {
    display: flex;
    flex-wrap: wrap;
    height: 180px;
    align-content: space-between;
    border: 1px solid #ccc;
  }
  div {
    width: 50%;
  }
</style>

<section>
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</section>

<style>
  section {
    display: grid;
    height: 180px;
    align-content: space-evenly;
    border: 1px solid #ccc;
  }
</style>

<section>
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</section>

Key Takeaways