HTML and CSS Reference
In-Depth Information
■
The following examples use the shorthand
flex-flow
rather than the individual
flex-direction
and
flex-wrap
properties.
Note
In the case of rows, reversing the cross axis means rows are stacked from bottom to top. The styles for the flex
container in row_wrap-reverse.html look like this:
#container {
display: flex;
flex-flow: wrap-reverse;
border: 1px solid #000;
width: 400px;
}
This produces the result shown in Figure
22-16
. The flex items are still laid out in the normal order along the
main axis (left to right), but the cross axis has been changed, so the first row is at the bottom of the container.
Figure 22-16.
The rows run from left to right, but start at the bottom of the flex container
In the case of columns, switching the cross axis in a left-to-right language like English results in the
columns being laid out from right to left, as shown in Figure
22-17
. The styles for the
container<div>
in
column_wrap-reverse.html look like this:
#container {
display: flex;
flex-flow: wrap-reverse column;
border: 1px solid #000;
width: 400px;
height: 120px;
}
Figure 22-17.
The second column is displayed on the left