The flex-wrap property, wrapping of flex items

What happens if you add more flex items to a container than can fit in a single row?

• By default, they shrink as needed, without going below their minimum width.
• Even if you assign an explicit width to them, the flexbox mechanism can override this setting and reduce the width.
• If they can no longer be fit in a container after they are shrunk, they will overflow its boundaries, but they will continue to be placed in a single row.

This is somewhat similar to the behavior of cells in a table.

You can change this behavior using the flex-wrap flex container property. By default, it has the value nowrap, that is, the flex items stay on a single line.

The wrap value allows flex items to wrap onto a new line if they do not fit on the current line.

Let’s see how this works in practice.