Bird
Raised Fist0
CSSmarkup~5 mins

Align items 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 items helps you control how things line up inside a box. It makes your page look neat and organized.

When you want to center buttons or text inside a menu bar.
When you have a list of pictures and want them all lined up nicely.
When you want to move items to the top, bottom, or middle inside a container.
When you want to create a row or column layout with items spaced evenly.
When you want to fix alignment issues on different screen sizes.
Syntax
CSS
.container {
  display: flex;
  align-items: value;
}

The align-items property works only if the container uses display: flex or display: grid.

The value can be flex-start, flex-end, center, baseline, or stretch.

Examples
This centers all items vertically inside the container.
CSS
.container {
  display: flex;
  align-items: center;
}
This aligns all items to the top of the container.
CSS
.container {
  display: flex;
  align-items: flex-start;
}
This aligns all items to the bottom of the container.
CSS
.container {
  display: flex;
  align-items: flex-end;
}
This makes all items stretch to fill the container's height.
CSS
.container {
  display: flex;
  align-items: stretch;
}
Sample Program

This example shows three colored boxes inside a container. The container uses align-items: center to line up the boxes vertically in the middle, even though they have different heights.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Align Items Example</title>
  <style>
    .container {
      display: flex;
      height: 10rem;
      border: 2px solid #333;
      align-items: center;
      background-color: #f0f0f0;
      gap: 1rem;
      padding: 1rem;
    }
    .box {
      width: 4rem;
      background-color: #4a90e2;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      border-radius: 0.5rem;
    }
  </style>
</head>
<body>
  <main>
    <section class="container" aria-label="Example of align-items center">
      <div class="box">A</div>
      <div class="box" style="height: 6rem;">B</div>
      <div class="box" style="height: 3rem;">C</div>
    </section>
  </main>
</body>
</html>
OutputSuccess
Important Notes

If you want to align items horizontally, use justify-content instead.

Using align-items: stretch makes items fill the container's height if they don't have a fixed height.

Try changing the align-items value in the example to see how the boxes move.

Summary

Align items controls vertical alignment inside flex or grid containers.

Common values are center, flex-start, flex-end, and stretch.

It helps make layouts look neat and balanced.

Practice

(1/5)
1. What does the CSS property align-items do in a flex container?
easy
A. It controls the vertical alignment of items inside the container.
B. It changes the background color of the container.
C. It sets the font size of the items.
D. It adds space between items horizontally.

Solution

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

    The align-items property is used inside flex or grid containers to control how items align vertically.

  2. Step 2: Compare with other options

    Options B, C, and D describe unrelated CSS properties or effects, so they are incorrect.

  3. Final Answer:

    It controls the vertical alignment of items inside the container. -> Option A

  4. Quick Check:

    Vertical alignment = align-items [OK]
Hint: Align items = vertical alignment inside flex/grid [OK]
Common Mistakes:
  • Confusing align-items with justify-content
  • Thinking it changes colors or fonts
  • Mixing horizontal and vertical alignment
2. Which of the following is the correct syntax to center items vertically in a flex container using align-items?
easy
A. align-items: justify;
B. align-items: middle;
C. align-items: vertical-center;
D. align-items: center;

Solution

  1. Step 1: Recall valid align-items values

    Valid values include center, flex-start, flex-end, and stretch. center centers items vertically.

  2. Step 2: Check each option

    Options A, B, and C are not valid CSS values for align-items.

  3. Final Answer:

    align-items: center; -> Option D

  4. Quick Check:

    Center vertically = align-items: center [OK]
Hint: Use 'center' exactly for vertical centering [OK]
Common Mistakes:
  • Using 'middle' instead of 'center'
  • Confusing justify-content with align-items
  • Adding invalid values like 'vertical-center'
3. Given this CSS and HTML, what will be the vertical alignment of the items inside the flex container?
div.container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
</div>
medium
A. Items will be aligned at the bottom of the container.
B. Items will be stretched to fill the container height.
C. Items will be aligned at the top of the container.
D. Items will be centered vertically.

Solution

  1. Step 1: Understand align-items: flex-end;

    This value aligns flex items to the bottom edge of the container vertically.

  2. Step 2: Apply to container height

    The container is 200px tall, so items will appear at the bottom inside that space.

  3. Final Answer:

    Items will be aligned at the bottom of the container. -> Option A

  4. Quick Check:

    flex-end = bottom alignment [OK]
Hint: flex-end aligns items to bottom vertically [OK]
Common Mistakes:
  • Thinking flex-end means top alignment
  • Confusing align-items with justify-content
  • Assuming items stretch by default
4. Identify the error in this CSS code that prevents vertical centering of flex items:
div.container {
  display: flex;
  align-items: center
  height: 150px;
}
medium
A. display: flex; should be display: block;.
B. Missing semicolon after align-items: center.
C. height property is invalid inside flex containers.
D. align-items cannot be used without justify-content.

Solution

  1. Step 1: Check CSS syntax

    Each CSS property must end with a semicolon. The line align-items: center is missing a semicolon.

  2. Step 2: Validate other properties

    display: flex; is correct, height is valid, and align-items works without justify-content.

  3. Final Answer:

    Missing semicolon after align-items: center. -> Option B

  4. Quick Check:

    CSS lines need semicolons [OK]
Hint: Always end CSS lines with semicolon [OK]
Common Mistakes:
  • Forgetting semicolon after property
  • Thinking height is invalid in flex
  • Believing justify-content is required with align-items
5. You want a grid container where all items stretch vertically to fill their grid area, but one item should be aligned at the top instead. Which CSS setup achieves this?
div.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}
div.grid > div.special {
  /* What to add here? */
}
hard
A. align-self: flex-start;
B. justify-self: flex-start;
C. align-self: start;
D. align-items: flex-start;

Solution

  1. Step 1: Understand container and item alignment

    The container uses align-items: stretch; to stretch all items vertically by default.

  2. Step 2: Override alignment for one item

    To override vertical alignment for a single grid item, use align-self. The correct value for top alignment is start, not flex-start (which is for flexbox).

  3. Final Answer:

    align-self: start; -> Option C

  4. Quick Check:

    Grid item top align = align-self: start [OK]
Hint: Use align-self: start for grid item top alignment [OK]
Common Mistakes:
  • Using flex-start instead of start in grid
  • Applying align-items on item instead of align-self
  • Confusing justify-self with vertical alignment