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-direction. Use flex-wrap: wrap-reverse to reverse this order.

A shorthand property called flex-flow allows you to specify flex-direction and flex-wrap in a single line, by adding the flex-direction value first, followed by flex-wrap value, for example: flex-flow: row wrap.

Lessons in this unit:

0:	Introduction
1:	Align rows or columns
2:	Vertical and horizontal alignment
3:	▶︎ Wrap
4:	Moving items before / after another one using order
5:	Vertical alignment using align-self
6:	Grow or shrink an item if necessary
7:	DEMO Create a layout using Flexbox