196 Chapter 15
Wrap and Flow
When you have too many items to fit comfortably into one row (or column)
of a container, you can break them onto multiple lines using the flex-wrap
property. The default value of nowrap preserves all the items on the same
line, whereas a value of wrap breaks them onto extra lines below the first
(or to the right in column view), if required..flex-container { flex-wrap: wrap; }The value wrap-reverse changes the direction of the cross axis so new
lines appear above (or to the left). Figure 15-13 compares the effect of the
two different values.Figure 15-13: Comparing the effects of different values for the
flex-wrap property. The top example has a value of wrap, so element
#c appears on a new line below, whereas in the bottom example,
the value is wrap-reverse, so element #c is on a new line above.The flex-flow Shorthand
You can combine flex-wrap with flex-direction in the shorthand flex-flow
property. For example, to set a column with multiple lines and a reversed
cross axis, use this:E { flex-flow: column wrap-reverse; }Aligning Multiple Lines with align-content
When items wrap over multiple lines, you can control their alignment
with the align-content property. This property works like justify-content
but on the cross axis. It has the same possible values—flex-start, flex-end,