Understanding the flex-wrap Property in Flexbox
The flex-wrap property in CSS defines whether flex items should stay on a single line or wrap onto multiple lines when they overflow the flex container. It allows for more flexible and responsive layouts by controlling how items flow within a flex container.
nowrap(default): All flex items are placed on a single line, and they may overflow the container.wrap: Flex items wrap onto multiple lines from top to bottom (in horizontal flex direction).wrap-reverse: Flex items wrap onto multiple lines but in reverse order (from bottom to top).
In this example, when the width of the flex container is too small to fit all items in one line, flex-wrap: wrap causes the extra items to move to the next line instead of overflowing.
Use
flex-wrap: wrapfor responsive designs where items should move to new lines on smaller screens.Combine
flex-wrapwithalign-contentto control spacing between multiple lines.Avoid using
nowrapwhen items have fixed widths that can cause overflow issues.