Flex wrap in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the CSS property flex-wrap do?

The flex-wrap property controls whether flex items stay on one line or wrap onto multiple lines inside a flex container.

beginner

What are the possible values of flex-wrap?

• nowrap: All items stay on one line (default).
• wrap: Items wrap onto multiple lines, from top to bottom.
• wrap-reverse: Items wrap onto multiple lines, but in reverse order (bottom to top).

intermediate

How does flex-wrap: wrap help in responsive design?

It allows items to move to the next line when there is not enough space, so the layout adapts nicely on smaller screens without overflowing.

beginner

What is the default value of flex-wrap and what does it mean?

The default is nowrap, which means all flex items stay on a single line and may shrink to fit.

intermediate

How do you combine flex-wrap with flex-direction to control layout?

flex-wrap controls line wrapping, while flex-direction controls the main axis direction. Together, they define how items flow and wrap inside the container.

What happens if you set flex-wrap: nowrap on a flex container?

A Flex items wrap onto multiple lines.

B Flex items stay on one line and may shrink to fit.

C Flex items disappear.

D Flex items stack vertically.

nowrap keeps all items on one line, shrinking them if needed.

Which flex-wrap value makes items wrap in reverse order?

A wrap

B nowrap

C wrap-reverse

D reverse-wrap

wrap-reverse wraps items onto multiple lines but in reverse vertical order.

Why is flex-wrap: wrap useful for mobile screens?

A It hides items on small screens.

B It forces items to stay in one line.

C It changes item colors.

D It allows items to move to next line to avoid overflow.

Wrapping helps keep content visible and neat on smaller screens.

If you want flex items to never wrap, which value do you use?

A nowrap

B wrap

C wrap-reverse

D no-wrap

nowrap is the correct value to prevent wrapping.

Which two properties work together to control flex item layout and wrapping?

A flex-direction and flex-wrap

B flex-grow and flex-shrink

C justify-content and align-items

D margin and padding

flex-direction sets the main axis direction, and flex-wrap controls if items wrap.

Explain how the flex-wrap property affects the layout of flex items inside a container.

Think about whether items stay in one line or move to new lines.

Describe a real-life example where using flex-wrap: wrap improves the user experience on a website.

Imagine a row of buttons or images on a phone screen.