The "flex-wrap" property can store one of three values:

• nowrap
• wrap
• wrap-reverse

The default value that the "flex-wrap" property stores is "nowrap". This means that all the items are always located on the main axis and on the same line, regardless of the number of items that we have.

We can make the wrapper display items on multiple lines when they don't fit in a row by setting the "flex-wrap" property to "wrap".

As we see in the example above we have 7 boxes and even though they have a width of 100 pixels, Flexbox takes care of giving them another width so that they continue to fit in the same row because the "flex-wrap" property stores "nowrap".

Let's try to modify the "flex-wrap" property with the value "wrap" and we will be able to verify that when no more items enter a line they continue in the next one.