Align items in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

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

Consider a flex container with multiple items inside. What is the effect of setting align-items: center; on the container?

CSS

display: flex;
align-items: center;

A It centers the flex items horizontally along the main axis.

B It spaces the flex items evenly with equal gaps between them.

C It centers the flex items vertically along the container's cross axis.

D It aligns the flex items to the start of the main axis.

💡 Hint

Think about the difference between main axis and cross axis in flexbox.

The align-items property controls how flex items are positioned along the cross axis (usually vertical). Setting it to center vertically centers all items within the container.

📝 Syntax

intermediate

Which CSS snippet correctly aligns flex items to the bottom of the container?

You want all flex items inside a container to align at the bottom edge vertically. Which CSS code achieves this?

CSS

display: flex;
/* align-items property here */

A align-items: flex-end;

B align-items: flex-start;

C align-items: center;

D align-items: stretch;

💡 Hint

Remember that flex-end aligns items at the end of the cross axis.

align-items: flex-end; moves all flex items to the end of the cross axis, which is the bottom if the flex direction is row.

❓ selector

advanced

Which CSS selector targets only flex containers with align-items: center;?

You want to style only flex containers that have align-items: center; set. Which selector correctly matches these containers?

A div[style*='align-items: center']

B div.align-items-center

C div:has(> *:align-items(center))

D div[align-items='center']

💡 Hint

Think about attribute selectors and inline styles.

Only option A uses an attribute selector to match inline styles containing align-items: center. Other options are invalid or do not select based on CSS property values.

❓ layout

advanced

What visual effect does align-items: stretch; have on flex items?

Given a flex container with fixed height, what happens to the height of flex items when align-items: stretch; is applied?

CSS

display: flex;
align-items: stretch;
height: 200px;

A Flex items center vertically without changing height.

B Flex items keep their original height and align at the top.

C Flex items shrink to the smallest height among them.

D Flex items expand to fill the container's height.

💡 Hint

Stretch means to fill the available space along the cross axis.

align-items: stretch; makes flex items grow to fill the container's height (cross axis), so they all have equal height matching the container.

❓ accessibility

expert

How does improper use of align-items affect keyboard navigation in flex layouts?

If flex items are visually aligned with align-items but their DOM order differs, what accessibility issue can arise?

A Flex items become unreachable by keyboard navigation.

B Keyboard users may experience confusing focus order not matching visual layout.

C Screen readers will ignore the flex container entirely.

D The browser automatically fixes focus order to match visual alignment.

💡 Hint

Visual order and DOM order can differ in flexbox.

Using align-items changes only visual alignment, not DOM order. Keyboard navigation follows DOM order, so mismatches can confuse users relying on keyboard.

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