Understanding the flex-wrap Property in Flexbox
The flex-wrap property in CSS determines whether flex items should stay on a single line or wrap onto multiple lines when they exceed the container’s available space. It allows for more responsive and adaptive layouts by controlling how items flow within a flex container.
nowrap(default): All flex items are kept on a single line, even if they overflow the container.wrap: Flex items wrap onto multiple lines from top to bottom (in a horizontal layout).wrap-reverse: Flex items wrap onto multiple lines from bottom to top (in a horizontal layout).
In this example, when the total width of the flex items exceeds the container width, flex-wrap: wrap causes the extra items to move to the next line instead of overflowing.
Use
flex-wrap: wrapto make layouts responsive and avoid overflow issues.Combine
flex-wrapwithalign-contentto control spacing between multiple flex lines.Avoid
nowrapwhen working with fixed-width items in smaller viewports to prevent content clipping.