CSS3 LAYOUT CHOPS - Practical CSS3: Develop and Design - page 256

FIGURE 7.8 Using row wrap
to make child elements wrap
neatly across different rows
down the container is very
useful in some circumstances.
And the great thing is that you can also reverse the direction the child elements
are displayed in, either horizontally or vertically, by using row-reverse and column-
reverse . Try these options to see what happens!
WRAPPING ELEMENTS ONTO NEW LINES
If there are enough child elements to overflow the parent element, you can make
them wrap onto multiple lines by adding an extra keyword to the flex-flow prop-
erty, as shown in the example file our-friends-flexbox-wrap.html:
section {
: ;
: w wrap ;
}
This is similar to the previous example but contains six <article> is of equal
width, not three. This produces the result shown in Figure 7.8 . Note how, when
you reduce the width of the browser window, the layout will go from three to two
to one column—a cool responsive effect.
Note: flex-flow is actually a shorthand property for setting the flex-direction
and flex-wrap properties on one line. Their possible values are as follows:
flex-wrap . nowrap , wrap , wrap-reverse
flex-direction . row , row-reverse , column , column-reverse