Visit Pixel Rocket

Flex Wrap - Finish

See how flex-wrap allows items to flow to new lines when they don't fit. Essential for responsive layouts that adapt to different container widths.

See Start Next: Align Content

nowrap (default) - Items get squished!

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

Items stay on one line and shrink to fit

wrap - Items flow to new lines

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

Items wrap to new lines when they don't fit

wrap-reverse - Items wrap in reverse order

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

Items wrap to new lines in reverse direction

Key Takeaways

  • flex-wrap controls whether items stay on one line or wrap to new lines
  • Flex Wrap Values:
    • nowrap - Items stay on one line and shrink (default)
    • wrap - Items wrap to new lines when needed
    • wrap-reverse - Items wrap in reverse direction
  • Wrapping creates multiple "flex lines" that align-content can control
  • Essential for responsive layouts and card grids
  • Use with flex-basis or min-width to control when wrapping occurs