What Next? - Beginning CSS3 - page 481

Controlling the Flow in a Flex Container
In the standard CSS box model, the flow of a document displays elements in the order that they appear in the
underlying HTML markup. Flex layout lets you control the direction of the flow inside a flex container using the
properties listed in Table 22-1 .

Table 22-1. Properties that Control the Flow Inside a Flex Container

Property Initial Value Description

flex-direction row

Sets the direction of the main axis. Flex items can be laid out in rows or
columns in forward or reverse order.

flex-wrap nowrap Controls whether the container allows multiple rows or columns. Also

affects the direction of the cross axis.

flex-flow row nowrap Shorthand property for flex-direction and flex-wrap .

The properties in Table 22-1 apply to all flex items inside a flex container. As you'll learn later in this chapter,
you can also reorder individual flex items using the order property.
The flex-direction property controls the direction of the flex container's main axis, laying out flex items in
rows or columns. It accepts the following values:
row The main axis follows the same direction as the current language. In left-to-right
languages like English, it starts at the left edge of the flex container and ends at the
right edge. This is the default.
row-reverse Runs the main axis in the opposite direction to row .
column Runs the main axis in the same direction as blocks are laid out. In both left-to-
right and right-to-left languages, this means from top to bottom. In traditional Chinese
and Japanese layout, blocks are laid out from right to left.
column-reverse Runs the main axis in the opposite direction to column .

By default, flex containers display only a single row or column of flex items. To display multiple rows or
columns, you need to use flex-wrap , which accepts the following values:
nowrap This is the default. The container creates only one row or column.
wrap The flex container is multi-line. In a left-to-right language like English, the cross
axis runs in the direction indicated in Figures 22-3 through 22-5 .
wrap-reverse The flex container is multi-line, but the cross-axis runs in the opposite
direction from wrap .
The flex-flow property is a shorthand way of setting both flex-direction and flex-wrap in a single
declaration. It accepts the same values as the individual properties. Because there is no ambiguity, the values can
be in either order. If you omit the value for flex-direction , it defaults to row . And if you omit the value for
flex-wrap , it defaults to nowrap .
Although these properties accept only a few values, the combination of flex-direction and flex-flow can be
confusing because of the way they affect the main and cross axes. The following sections clarify the various options.