Flex wrap behavior in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does flex-wrap control in a flex container?

flex-wrap controls whether flex items stay on one line or wrap onto multiple lines when they don't fit in the container.

beginner

What is the default value of flex-wrap in Tailwind CSS?

The default is flex-nowrap, which means items stay on a single line and do not wrap.

beginner

How do you make flex items wrap onto multiple lines using Tailwind CSS?

Use the class flex-wrap on the flex container to allow items to wrap onto new lines.

intermediate

What does flex-wrap-reverse do in Tailwind CSS?

flex-wrap-reverse makes flex items wrap onto multiple lines but in reverse order vertically.

intermediate

Why is using flex-wrap important for responsive design?

It helps content adjust to smaller screens by wrapping items instead of shrinking them too much or overflowing.

Which Tailwind class allows flex items to wrap onto multiple lines?

A flex-wrap

B flex-nowrap

C flex-row

D flex-col

flex-wrap enables wrapping of flex items onto new lines.

What happens if you use flex-nowrap on a flex container?

A Items stay on one line and may overflow

B Items wrap onto multiple lines

C Items stack vertically

D Items reverse order

flex-nowrap keeps items on one line, which can cause overflow if they don't fit.

Which class reverses the wrap direction of flex items in Tailwind?

A flex-wrap

B flex-nowrap

C flex-wrap-reverse

D flex-row-reverse

flex-wrap-reverse wraps items in reverse vertical order.

Why might you want to use flex-wrap on a small screen?

A To keep items on one line

B To allow items to wrap and avoid overflow

C To hide items

D To change item colors

Wrapping helps content fit better on small screens by moving items to new lines.

What is the default flex wrap behavior in Tailwind CSS?

A flex-col

B flex-wrap-reverse

C flex-wrap

D flex-nowrap

By default, Tailwind uses flex-nowrap, so items do not wrap.

Explain how flex-wrap affects the layout of flex items and why it matters for responsive design.

Think about what happens when items don't fit in one line.

Describe the difference between flex-wrap, flex-nowrap, and flex-wrap-reverse in Tailwind CSS.

Focus on how items flow and wrap in each case.