flex-wrap

Flex wrap The flex-wrap property specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line. nowrap; The flexible items will not wrap. wrap; The flexible items will wrap if necessary.

flex-wrap

By default, flex items will try to shrink itself to fit onto one line, in other words, no wrap. However if you want the flex items to maintain its size and have the overflow spread on multiple lines in the containers, then you can turn on wrap.

This property is what will allow flex items in your container to occupy more than one line.

.parent {
  flex-wrap: nowrap /* default */
          or wrap
          or wrap-reverse
}

The flex-wrap property specifies whether the flex items should wrap or not.

• The wrap value specifies that the flex items will wrap if necessary:

.flex-container { display: flex; flex-wrap: wrap; }

• The nowrap value specifies that the flex items will not wrap (this is default):

.flex-container { display: flex; flex-wrap: nowrap; }

• The wrap-reverse value specifies that the flexible items will wrap if necessary, in reverse order:

.flex-container { display: flex; flex-wrap: wrap-reverse; }