Flex wrap in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What does flex-wrap: wrap; do in a flex container?

Choose the correct description of the effect of flex-wrap: wrap; on flex items inside a flex container.

A It centers all flex items horizontally inside the container.

B It forces all flex items to stay on a single line, shrinking them if needed.

C It allows flex items to move to the next line if they don't fit in one line.

D It hides any flex items that don't fit in the container's width.

💡 Hint

Think about what happens when there are too many items to fit in one row.

The flex-wrap: wrap; property allows flex items to wrap onto multiple lines when they can't fit in a single line. Without it, items stay on one line and may shrink.

📝 Syntax

intermediate

Which CSS snippet correctly enables wrapping of flex items?

Select the CSS code that correctly applies wrapping behavior to a flex container.

CSS

div.container {
  display: flex;
  /* Which line below is correct? */
}

A flex-wrap: wrap;

B flex-wrap: nowrap;

C flex-wrap: true;

D wrap-flex: true;

💡 Hint

The property name is flex-wrap and the value to allow wrapping is wrap.

The correct syntax to allow flex items to wrap is flex-wrap: wrap;. Other options are invalid CSS or disable wrapping.

❓ rendering

advanced

What will be the visible layout result of this CSS?

Given the CSS below, how will the flex items be arranged visually in the browser?

CSS

div.container {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  border: 1px solid black;
}

div.item {
  flex: 0 0 140px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

A Items overlap each other inside the container.

B All items in one row, shrinking to fit inside 300px.

C Items stacked vertically in a single column.

D Two items per row, wrapping to next line after two items.

💡 Hint

Each item is 140px wide plus margin, container is 300px wide.

Each item is 140px wide plus margin, so only two fit per 300px container width. Because flex-wrap: wrap; is set, items wrap to the next line after two.

❓ selector

advanced

Which CSS selector targets only flex items that wrap to the next line?

You want to style only the flex items that appear on the second line after wrapping. Which selector will select those items?

A div.container > div.item:nth-child(n+3)

B div.container > div.item:first-child

C div.container > div.item:last-child

D div.container > div.item:nth-child(2)

💡 Hint

Items that wrap to the next line start from the third item if two fit per line.

If two items fit per line, items from the third onward wrap to the next line. The selector :nth-child(n+3) selects items from the third child onward.

❓ accessibility

expert

How does using flex-wrap: wrap; affect keyboard navigation and accessibility?

Consider a flex container with many items that wrap onto multiple lines. What is the best practice to ensure keyboard users can navigate items logically?

A Disable wrapping to keep all items on one line for simpler navigation.

B Ensure the DOM order matches the visual order so tabbing moves through items in reading order.

C Add ARIA roles to each flex item to force screen readers to read them in visual order.

D Use <code>tabindex="-1"</code> on wrapped items to skip them in keyboard navigation.

💡 Hint

Think about how keyboard users move through content and how DOM order affects that.

Keyboard navigation follows the DOM order. When using flex-wrap: wrap;, keeping the DOM order consistent with visual order ensures logical tabbing and better accessibility.