188 Chapter 15
The result is shown in Figure 15-3.Figure 15-3: The row-reverse value quickly reverses the order of flex items.Because reversing directions like this also reverses the axis direction,
in the case of row-reverse, the start of the axis is on the left, and the end is
on the right. In the case of column-reverse, the start is at the bottom, and the
end is at the top.Fully Reordering Content
You can create custom ordering patterns with the order property. The order
property is applied to the flex items (not their container). The value of
the property is a number that creates an ordinal group that groups together
items with the same value and orders them by their ordinal group: All items
in the lowest numbered group come first, then all items in the second-lowest
numbered group, and so on. Any items without a declared value are shown
first because they have the default value of 0.
Items with the same ordinal group number are grouped in the order
in which they appear in the DOM. For example, consider four flex items, #a
through #d:<div id="container">
<div id="a">...</div>
<div id="b">...</div>
<div id="c">...</div>
<div id="d">...</div>
</div>If no explicit values are set, and if flex-direction isn’t reversed, the chil-
dren are displayed in the order in which they appear in the DOM: #a, #b, #c,
#d. But let’s reorder them by using different values on the order property:#a { order: 2; }
#b, #d { order: 3; }
#c { order: 1; }With these rules applied, the order in which the items are laid out
becomes: #c, #a, #b, #d. Item #c comes first because it has the lowest ordinal
group number, followed by #a with the next highest number, then #b and
#d—both of which are in ordinal group 3. Item #d comes last because it
comes later in the DOM order.