CSS flex-wrap Property

Subject: css

CSS flex-wrap Property

The flex-wrap property specifies whether flex items should wrap onto multiple lines or stay in a single line inside a flex container. It ensures better layout behavior when there isn't enough space.

Why Use flex-wrap?

  • Prevent items from shrinking too much
  • Automatically wrap items to the next line when space runs out
  • Improve readability and responsiveness
  • Avoid complex media queries in simple layouts

Syntax

🚀 Try it in Compiler
  • nowrap (default): All items stay on one line
  • wrap: Items wrap to the next line (from top to bottom)
  • wrap-reverse: Items wrap in reverse order (from bottom to top)

Example: Wrapping Flex Items

🚀 Try it in Compiler

Explanation

  • The container uses flex-wrap: wrap, allowing items to wrap when space runs out
  • Items with fixed width automatically move to the next line on smaller screens

Example: wrap-reverse

🚀 Try it in Compiler
  • Items will now wrap from bottom to top instead of top to bottom

Best Practices

  • Use wrap for multi-line flex layouts
  • Combine with gap, justify-content, and align-content for clean alignment
  • Avoid nowrap on small screens where it may make items unreadable

Common Use Cases

  • Responsive card or image grids
  • Navigation menus that overflow onto new rows
  • Tag or chip-based UI components
  • Toolbars or button groups that need to wrap

Key Takeaways

  • flex-wrap defines whether flex items wrap onto new lines
  • wrap enables wrapping from top to bottom
  • wrap-reverse wraps items in reverse vertical direction
  • Improves responsiveness and layout structure
  • Often used with other layout utilities for full control
Next: CSS Grid Introduction