Why would you use flex-wrap CSS property and what values can it have?

The flex-wrap property affects how the flex container items will be wrapped.

It can have the following values:

• nowrap - this makes all the flex items stay on the one row (for row direction) or column (for column direction)
• wrap - this makes all the flex items that don't fit on one row (for row direction) or column (for column direction) wrap to another row/column.
• wrap-reverse - this has the same value as wrap, except the items wrap to the other side.

div {
  display: flex;
  flex-wrap: nowrap;
}