Flexbox: Wrap

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
Want to learn more? Check out our courses