Bird
Raised Fist0
CSSmarkup~5 mins

Align content in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
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.

Practice

(1/5)
1. What does the CSS property align-content control in a flex container?
easy
A. The alignment of individual items along the main axis
B. The background color of the container
C. The font size of the container's text
D. The spacing between rows or columns when items wrap to multiple lines

Solution

  1. Step 1: Understand the role of align-content

    This property controls how multiple rows or columns are spaced inside a container when items wrap to more than one line.

  2. Step 2: Differentiate from other properties

    align-items aligns individual items on a single line, not spacing between lines. Font size and background color are unrelated.

  3. Final Answer:

    The spacing between rows or columns when items wrap to multiple lines -> Option D

  4. Quick Check:

    Align-content = spacing between wrapped lines [OK]
Hint: Align-content affects multi-line spacing, not single items [OK]
Common Mistakes:
  • Confusing align-content with align-items
  • Thinking it changes font or colors
  • Using it when items do not wrap
2. Which of the following is the correct syntax to center content along the cross axis in a multi-line flex container?
easy
A. align-content: center;
B. align-items: center;
C. justify-content: center;
D. text-align: center;

Solution

  1. Step 1: Identify the property for multi-line alignment

    align-content centers the space between multiple lines in a flex container.

  2. Step 2: Differentiate from other alignment properties

    align-items centers items on a single line, justify-content aligns along the main axis, and text-align affects inline text alignment.

  3. Final Answer:

    align-content: center; -> Option A

  4. Quick Check:

    Center multi-line content with align-content: center [OK]
Hint: Use align-content for multi-line centering, not align-items [OK]
Common Mistakes:
  • Using align-items instead of align-content
  • Confusing justify-content with align-content
  • Applying text-align to flex containers
3. Given this CSS for a flex container with wrapped items:
display: flex;
flex-wrap: wrap;
align-content: space-between;
height: 200px;

What will align-content: space-between; do visually?
medium
A. Stretch rows to fill the container height
B. Place the rows evenly with space between them, top and bottom edges have no extra space
C. Stack all rows at the top with no space between
D. Center all rows vertically with equal space above and below

Solution

  1. Step 1: Understand space-between behavior

    This value distributes rows so the first row is at the top, the last row at the bottom, and equal space between rows.

  2. Step 2: Visualize the effect in a 200px tall container

    Rows spread out vertically with no extra space above the first or below the last row.

  3. Final Answer:

    Place the rows evenly with space between them, top and bottom edges have no extra space -> Option B

  4. Quick Check:

    space-between = equal gaps between rows, edges flush [OK]
Hint: space-between puts space only between rows, not edges [OK]
Common Mistakes:
  • Thinking space-between adds space at container edges
  • Confusing with space-around or space-evenly
  • Expecting rows to stretch to fill height
4. You wrote this CSS but the align-content property has no visible effect:
display: flex;
flex-wrap: nowrap;
align-content: center;
height: 150px;

What is the main reason align-content does not work here?
medium
A. align-content requires justify-content to be set
B. align-content only works with grid layouts
C. flex-wrap is set to nowrap, so items do not wrap to multiple lines
D. The container height is too small to see the effect

Solution

  1. Step 1: Check the flex-wrap value

    It is set to nowrap, so all items stay on a single line.

  2. Step 2: Understand when align-content works

    align-content only affects spacing between multiple lines, so it has no effect if items do not wrap.

  3. Final Answer:

    flex-wrap is set to nowrap, so items do not wrap to multiple lines -> Option C

  4. Quick Check:

    Align-content needs wrapped lines to work [OK]
Hint: Ensure flex-wrap allows wrapping for align-content to work [OK]
Common Mistakes:
  • Assuming align-content works without wrapping
  • Thinking align-content applies to grid only
  • Ignoring flex-wrap setting
5. You want a flex container with wrapped items to fill its height by stretching rows evenly. Which CSS setup achieves this?
hard
A. display: flex; flex-wrap: wrap; align-content: stretch; height: 300px;
B. display: flex; flex-wrap: nowrap; align-content: stretch; height: 300px;
C. display: flex; flex-wrap: wrap; align-items: stretch; height: 300px;
D. display: flex; flex-wrap: wrap; justify-content: stretch; height: 300px;

Solution

  1. Step 1: Identify the need for multi-line stretching

    To stretch rows evenly, align-content: stretch; is required and items must wrap.

  2. Step 2: Confirm correct flex-wrap and height

    flex-wrap: wrap; allows multiple lines, and setting a container height (300px) lets stretching be visible.

  3. Step 3: Exclude incorrect options

    flex-wrap: nowrap; prevents wrapping, align-items affects single line items, and justify-content controls main axis, not cross axis.

  4. Final Answer:

    display: flex; flex-wrap: wrap; align-content: stretch; height: 300px; -> Option A

  5. Quick Check:

    Stretch multi-line rows with align-content: stretch and wrap [OK]
Hint: Use flex-wrap: wrap and align-content: stretch to fill height [OK]
Common Mistakes:
  • Using nowrap disables multi-line stretching
  • Confusing align-items with align-content
  • Using justify-content instead of align-content