Flex wrap behavior in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

How does flex-wrap affect item layout?

Given a container with flex and flex-wrap classes, what will happen when the items exceed the container width?

Tailwind

<div class="flex flex-wrap w-48 border border-gray-400">
  <div class="w-24 h-12 bg-blue-500 m-1"></div>
  <div class="w-24 h-12 bg-red-500 m-1"></div>
  <div class="w-24 h-12 bg-green-500 m-1"></div>
  <div class="w-24 h-12 bg-yellow-500 m-1"></div>
</div>

A Items will shrink to fit in one row without wrapping.

B Items will wrap to the next line when they don't fit in one row.

C Items will overflow outside the container horizontally.

D Items will stack vertically ignoring flex layout.

💡 Hint

Think about what flex-wrap does compared to the default flex-nowrap.

The flex-wrap class allows flex items to move to the next line if they don't fit in one row. Without it, items stay in one line and may overflow or shrink.

❓ selector

intermediate

Which Tailwind class enables wrapping of flex items?

You want your flex container to allow items to wrap onto multiple lines. Which class should you add?

A flex-wrap

B flex-nowrap

C flex-row

D flex-col

💡 Hint

Look for the class that explicitly mentions wrapping.

flex-wrap enables wrapping of flex items. flex-nowrap disables wrapping. flex-row and flex-col control direction, not wrapping.

🧠 Conceptual

advanced

What is the default behavior of flex items without flex-wrap?

If you create a flex container but do not add any wrapping class, how will the items behave when they exceed the container width?

A Items will shrink to fit the container width.

B Items will wrap to the next line automatically.

C Items will overflow the container horizontally.

D Items will stack vertically.

💡 Hint

Think about the default flex-wrap value in CSS.

By default, flex containers have flex-wrap: nowrap. This means items stay on one line and may overflow the container if they don't fit.

❓ layout

advanced

How does flex-wrap interact with justify-content?

You have a flex container with flex-wrap and justify-center. How will the items be arranged when wrapping occurs?

Tailwind

<div class="flex flex-wrap justify-center w-48 border border-gray-400">
  <div class="w-24 h-12 bg-purple-500 m-1"></div>
  <div class="w-24 h-12 bg-pink-500 m-1"></div>
  <div class="w-24 h-12 bg-indigo-500 m-1"></div>
  <div class="w-24 h-12 bg-teal-500 m-1"></div>
</div>

A Each wrapped line of items will be centered horizontally within the container.

B Items will be left aligned on all lines regardless of wrapping.

C Items will be stacked vertically ignoring horizontal alignment.

D Items will be spaced evenly with equal gaps on each line.

💡 Hint

Consider how justify-content affects each line in a wrapped flex container.

When flex-wrap is enabled, justify-content centers items on each wrapped line horizontally.

❓ accessibility

expert

How to ensure keyboard accessibility with wrapped flex items?

You have a flex container with wrapping enabled. What should you do to keep keyboard navigation logical and accessible?

A Add aria-hidden="true" to wrapped items to hide them from screen readers.

B Use absolute positioning to reorder items visually without changing DOM order.

C Use tabindex="-1" on all flex items to skip them in tab order.

D Ensure the DOM order matches the visual order of items after wrapping.

💡 Hint

Think about how keyboard users navigate content in the order it appears in the HTML.

Keyboard users navigate content in DOM order. If visual wrapping changes order, keep DOM order consistent to avoid confusion.