By default items in a flexbox container are kept on a single line, shrinking them to fit in the container.
To force the items to spread across multiple lines, use
flex-wrap: wrap. This will distribute the items according to the order set in
flex-wrap: wrap-reverse to reverse this order.
A shorthand property called
flex-flow allows you to specify
flex-wrap in a single line, by adding the
flex-direction value first, followed by
flex-wrap value, for example:
flex-flow: row wrap.