Flex container in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ layout

intermediate

What is the effect of justify-content: space-between; in a flex container?

Consider a flex container with three items inside. What visual effect does justify-content: space-between; produce on these items?

A Items are grouped at the start of the container with no space between them.

B Items are centered with equal space around each item including container edges.

C Items are evenly spaced with equal space between them, but no space at the container edges.

D Items are evenly spaced with equal space around them including container edges.

💡 Hint

Think about how space is distributed between items and container edges.

justify-content: space-between; places the first item at the start and the last item at the end of the container. The remaining items are spaced evenly between them, so there is no extra space at the container edges.

❓ selector

intermediate

Which CSS selector correctly targets only direct flex items inside a flex container?

Given a flex container with nested elements, which selector will select only the immediate flex items (children) but not deeper nested elements?

A .container > *

B .container *

C .container + *

D .container ~ *

💡 Hint

Look for the selector that selects only direct children.

The > combinator selects only direct children of the container. The * means all elements. So .container > * selects all direct children inside .container.

🧠 Conceptual

advanced

What happens if you set flex-wrap: nowrap; on a flex container with many items?

If a flex container has many items that cannot fit in one line, what is the visual result when flex-wrap: nowrap; is applied?

A Items are hidden if they don't fit inside the container.

B Items wrap onto multiple lines to fit inside the container.

C Items shrink vertically to fit inside the container height.

D All items stay on one line and may overflow the container horizontally.

💡 Hint

Consider what nowrap means for line breaking in flexbox.

flex-wrap: nowrap; forces all flex items to stay on a single line. If they don't fit, they overflow horizontally instead of wrapping to a new line.

❓ accessibility

advanced

How can you improve keyboard navigation for a flex container used as a toolbar?

You have a flex container acting as a toolbar with buttons. What is the best way to ensure keyboard users can navigate the buttons in order?

A Use <code>span</code> elements styled as buttons with click handlers.

B Use semantic <code>button</code> elements and ensure the flex container has <code>role="toolbar"</code>.

C Use <code>div</code> elements with <code>tabindex="0"</code> and no ARIA roles.

D Disable keyboard focus on buttons to prevent confusion.

💡 Hint

Think about semantic HTML and ARIA roles for toolbars.

Using native button elements ensures proper keyboard focus and behavior. Adding role="toolbar" on the flex container helps assistive technologies understand the group of controls.

📝 Syntax

expert

What is the computed width of each flex item with this CSS?

Given this CSS for a flex container and its items:

.container { display: flex; width: 600px; } .item { flex: 1 1 200px; }

There are 4 items inside. What is the width of each item in pixels?

A 150px each, because 600px divided equally among 4 items.

B 200px each, because the flex-basis is 200px and items don't shrink.

C 300px each, because items grow to fill container width.

D 100px each, because items shrink below flex-basis.

💡 Hint

Remember flex shorthand: flex-grow flex-shrink flex-basis. Items start at 200px but can shrink or grow.

Each item has flex: 1 1 200px; meaning they can grow and shrink equally starting from 200px. The container is 600px wide with 4 items. Total basis is 800px (4 × 200px), but container is smaller, so items shrink equally to 150px each (600 ÷ 4).