Align content in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What does the CSS property align-content control?

Choose the best description of what the align-content property does in CSS Flexbox or Grid layouts.

A It controls the alignment of the entire flex or grid container within its parent.

B It controls the spacing and alignment of multiple rows or columns inside a flex or grid container along the cross axis.

C It controls the alignment of individual items inside a flex or grid container along the main axis.

D It controls the text alignment inside flex or grid items.

💡 Hint

Think about how multiple lines or tracks inside a container are spaced or aligned.

The align-content property adjusts how multiple rows or columns (lines) inside a flex or grid container are spaced or aligned along the cross axis (vertical in flex-direction: row). It does not affect single items or text alignment.

📝 Syntax

intermediate

Which CSS snippet correctly centers multiple flex lines vertically inside a container?

Given a flex container with multiple wrapped lines, which align-content value centers these lines vertically?

CSS

display: flex;
flex-wrap: wrap;
height: 300px;

A align-content: space-between;

B align-content: flex-start;

C align-content: center;

D align-content: stretch;

💡 Hint

Centering means equal space above and below the lines.

align-content: center; centers the wrapped lines vertically inside the container. Other values align lines differently or stretch them.

❓ rendering

advanced

What will be the vertical spacing between rows with align-content: space-around; in a flex container?

A flex container has multiple wrapped rows. The CSS includes align-content: space-around;. What is the visual effect on the spacing between rows?

CSS

display: flex;
flex-wrap: wrap;
height: 400px;
align-content: space-around;

A Rows have equal space above and below each row, including container edges.

B Rows are packed at the top with no space between them.

C Rows have equal space only between them, but no space at container edges.

D Rows stretch to fill the container height with no gaps.

💡 Hint

Think about how 'space-around' distributes space around each item.

space-around places equal space around each row, so the space between rows is twice the space at the edges, visually centering the rows with space above and below.

❓ selector

advanced

Which CSS selector targets only flex containers with multiple wrapped lines to apply align-content?

You want to apply align-content: flex-end; only to flex containers that have wrapped lines (more than one line). Which selector or approach is correct?

A .container[style*='flex-wrap: wrap'] { align-content: flex-end; }

B .container:only-child { align-content: flex-end; }

C .container { align-content: flex-end; }

D .container:has(> *:nth-child(n+2)) { align-content: flex-end; }

💡 Hint

Use a selector that checks if the container has more than one child element.

The :has() selector can check if the container has multiple children (wrapped lines). Option D targets containers with at least two children, implying multiple lines.

❓ accessibility

expert

How does improper use of align-content affect accessibility in responsive designs?

Consider a flex container with multiple wrapped lines. If align-content is set to stretch without proper height constraints, what accessibility issue might arise on small screens?

A Content may overflow or become clipped, making it hard for keyboard users to navigate.

B Text inside flex items will lose semantic meaning, confusing screen readers.

C The container will ignore user color preferences, reducing contrast.

D Focus outlines will disappear from interactive elements.

💡 Hint

Think about how stretching content without limits affects layout on small screens.

If align-content: stretch; is used without setting a max height or proper constraints, flex lines may stretch beyond the visible area, causing content to overflow or be clipped. This can make keyboard navigation difficult and reduce usability.