Use CSS3 in applications - Programming in HTML5 with JavaScript and CSS3 - page 269

The default flow inside the flexbox is to display the elements left to right starting from the
left edge. You can experiment with manipulating the properties to display the colored boxes
in a different order. For example, what if you wanted to display the boxes in the same spot on
the layout axis, but in reverse order? You could do something like this:
#flexbox1 {
display: flexbox;
flex-direction:row-reverse;
border: 1px solid black;
margin-top: 100px;
min-height: 15px;
}
The output from this code is shown in Figure 4-36.
FIGURE 4-36 Flexbox content in reverse order along the same axis
Here you have changed the direction to row-reverse . This changes the order of the boxes.
When you run this, you see that it has not only reversed the order of the boxes, but also
moved them to the right end. This is because the flex direction controls what is considered
the origin points on the layout axis. By reversing the direction, you have indicated that the
layout start is now at the right end and the layout end is at the left end. In order to prevent
reversing the order, you will need to specify the lex-pack property to indicate the end of the
layout axis:
#flexbox1 {
display: flexbox;
flex-flow:row-reverse;
flex-pack:end;
border: 1px solid black;
margin-top: 100px;
min-height: 15px;
}
With this update, the boxes are now showing in the same order (red, yellow, green) but
aligned left as intended. The output is demonstrated in Figure 4-37.