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:
Search WWH ::

Custom Search