HTML and CSS Reference
In-Depth Information
Reversing Both Axes
In row-reverse_wrap-reverse.html, both axes are reversed by setting
flex-flow
like this:
#container {
display: flex;
flex-flow: row-reverse wrap-reverse;
border: 1px solid #000;
width: 400px;
}
This produces the result shown in Figure
22-18
. The first item is at the bottom-right of the container, the next
two items are displayed in the same row going from right to left, and the final item is at the top-right.
Figure 22-18.
Both axes have been reversed
To show what happens when both axes are reversed in a multiple-column flex container, the styles in
column-reverse_wrap-reverse.html look like this (see Figure
22-19
):
#container {
display: flex;
flex-flow: column-reverse wrap-reverse;
border: 1px solid #000;
width: 400px;
height: 120px;
}
Figure 22-19.
The columns start at the bottom and continue to the left
Reordering Individual Flex Items
In addition to altering the flow within a flex container, flex layout lets you change the order in which individual flex
items are displayed. You do this with the
order
property, which accepts as its value a positive or negative integer.
The default value of
order
is
0
. All flex items with the same value are displayed in the same order as they
appear in the underlying HTML markup. Although you can give each flex item a specific number to control its
position, it's usually much simpler to give an item a negative number to move it to the first position, or a positive
number to move it to the end. For example, the styles for books1.html (see Figure
22-1
at the beginning of this
chapter) move the image of the topic cover above the text by setting its
order
property to −
1
. The
<h3>
heading is
kept in first position by setting its order to −
2
like this:
