The flex-wrap property specifies whether the flex items should wrap or not. By default, flex items will try to fit onto one line. You can change that and allow the items to wrap as needed with this property.

Understanding Default Behavior

By default, flex-wrap is set to nowrap. This means that if you have a container that is 500px wide, and you put ten 100px wide items inside it, they will not wrap. Instead, they will shrink (if flex-shrink is allowed) or overflow the container.

The wrap Value

Setting flex-wrap: wrap; allows items to break onto multiple lines from top to bottom. This is essential for building responsive grids where the number of items per row changes based on the screen width.

The wrap-reverse Value

This value behaves like wrap, but the cross-start and cross-end directions are swapped. In a horizontal row, this means items wrap onto new lines above the previous line.

Best Practices

Use flex-wrap: wrap whenever you have a dynamic number of items or when items need to maintain a specific width regardless of container size. Combined with gap, it creates robust layout grids without media queries.