+25 XP
Flexbox - Lesson 46

Flex Wrap

Learn how to wrap flex items to new lines

🎁

What is Flex Wrap?

Control how flex items wrap to new lines when they don't fit

By default, flex items try to fit on one line. The flex-wrap property controls whether items should wrap to new lines.

Try it yourself:

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

flex-wrap: nowrap

nowrap

All items on one line (default)

wrap

Items wrap to new lines

wrap-reverse

Items wrap in reverse order