Align items in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the CSS property align-items do in a flex container?

The align-items property controls how flex items are aligned along the cross axis (usually vertical) inside a flex container.

It sets the default alignment for all items.

intermediate

Name the possible values of align-items and what they do.

• flex-start: Align items to the start of the cross axis.
• flex-end: Align items to the end of the cross axis.
• center: Center items along the cross axis.
• baseline: Align items so their text baselines line up.
• stretch: Stretch items to fill the container (default).

beginner

How does align-items: stretch behave if the flex items have no fixed height?

Items will stretch to fill the container's height along the cross axis, making them all the same height.

intermediate

What is the difference between align-items and justify-content in flexbox?

align-items aligns items along the cross axis (usually vertical).

justify-content aligns items along the main axis (usually horizontal).

beginner

Can align-items be used on non-flex containers?

No. align-items only works on flex containers or grid containers.

What does align-items: center; do in a flex container?

A Centers items horizontally along the main axis

B Centers items vertically along the cross axis

C Aligns items to the start of the main axis

D Stretches items to fill the container width

align-items controls alignment along the cross axis, so center centers items vertically (if flex direction is row).

Which align-items value makes all flex items the same height by default?

A baseline

B flex-start

C stretch

D flex-end

stretch makes items stretch to fill the container's cross axis size.

If you want text baselines of flex items to line up, which align-items value should you use?

A baseline

B flex-end

C center

D stretch

baseline aligns items so their text baselines match.

Which CSS property aligns items along the main axis in flexbox?

A align-items

B align-content

C flex-direction

D justify-content

justify-content aligns items along the main axis (usually horizontal).

Can align-items be used on a block container that is not a flex or grid container?

A No, it only works on flex or grid containers

B Only if display is inline

C Only if items have fixed height

D Yes, always

align-items only works on flex or grid containers.

Explain how the align-items property affects the layout of flex items inside a flex container.

Think about vertical alignment in a horizontal flex container.

Describe the difference between align-items and justify-content in flexbox layout.

Consider the directions of alignment in a flex container.

Practice

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