Flexbox layouts offer powerful control over how items are arranged within a container. By default, flex items are laid out in a single line, but sometimes the space is not enough to fit all items side by side. The flex-wrap property lets you control whether items stay on one line or wrap onto multiple lines or columns. It accepts three values: nowrap, wrap, and wrap-reverse.

• With nowrap (the default), items will try to fit onto a single line, potentially overflowing the container;
• Using wrap allows items to move onto new lines when they run out of space, making the layout more responsive;
• The wrap-reverse value is similar to wrap, but it places new lines in the opposite direction, which can be useful for certain visual effects or design requirements.

Choose nowrap when you want a strict, single-line layout, and use wrap or wrap-reverse when you want your layout to adapt and prevent overflow.

When you enable wrapping with flex-wrap: wrap, items that cannot fit on the main axis will automatically move to a new line. In the example above, the container is only 180px wide, but each item is 80px wide plus margins. This means only two items can fit per line, so the remaining items are pushed onto the next line. This wrapping behavior keeps your layout neat and prevents items from overflowing or being squished.

In contrast, if you used flex-wrap: nowrap, all four items would try to fit on one line, causing overflow or shrinking. Wrapping is especially helpful for responsive designs, where the container size may change on different devices.