HTML and CSS Reference
In-Depth Information
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
Initial Value
Sets the direction of the main axis. Flex items can be laid out in rows or
columns in forward or reverse order.
Controls whether the container allows multiple rows or columns. Also
affects the direction of the cross axis.
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.
Search WWH ::

Custom Search