0
0
CSSmarkup~5 mins

Align content in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Align content helps you control how multiple rows or columns of items are spaced inside a container. It makes your layout look neat and organized.

When you have a container with several rows or columns and want to control their spacing.
When you want to center or spread out groups of items inside a box.
When you want to fix extra space inside a container with wrapped items.
When you want to improve the look of a grid or flex container with multiple lines.
Syntax
CSS
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch;

This property works only if the container has multiple lines (like with flex-wrap or grid).

It controls the space between rows or columns, not individual items.

Examples
All rows or columns are packed at the start of the container.
CSS
align-content: flex-start;
Rows or columns are grouped in the center with equal space above and below.
CSS
align-content: center;
Rows or columns are spread out with equal space between them, but no space at the edges.
CSS
align-content: space-between;
Rows or columns stretch to fill the container evenly.
CSS
align-content: stretch;
Sample Program

This example shows a flex container with wrapped boxes. The align-content: space-around; makes the rows have equal space above, below, and between them inside the container.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Align Content Example</title>
<style>
  .container {
    display: flex;
    flex-wrap: wrap;
    height: 12rem;
    width: 12rem;
    border: 2px solid #333;
    align-content: space-around;
    background-color: #f0f0f0;
  }
  .box {
    flex: 0 0 4rem;
    height: 4rem;
    background-color: #4a90e2;
    margin: 0;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    border-radius: 0.25rem;
  }
</style>
</head>
<body>
  <main>
    <section>
      <h1>Align Content: space-around</h1>
      <div class="container" aria-label="Container with boxes">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
      </div>
    </section>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Align content only works when there are multiple lines (rows or columns) inside the container.

It does not affect single-line containers or individual item alignment.

Use with flex-wrap: wrap; or CSS Grid to see the effect.

Summary

Align content controls spacing between rows or columns inside a multi-line container.

It works only when items wrap to multiple lines.

Common values include flex-start, center, space-between, and stretch.