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.