What Next? - Beginning CSS3 - page 486

Figure 22-12. The overflow runs offscreen when the main axis is reversed
The overflow is moved onto a new row in row-reverse_wrap.html like this:
#container {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
border: 1px solid #000;
width: 400px;
}
As Figure 22-13 shows, the final item is right-aligned. You'll learn later in this chapter how to change the
alignment of items inside a flex container.
Figure 22-13. When the main axis is reversed, rows are aligned to the new main-start edge
The same effect is achieved by combining the individual properties like this (the values can be in either order):
flex-flow: wrap row-reverse;
To reverse the order of a single column, as shown in Figure 22-14 , set flex-direction or flex-flow to
column-reverse like this (the code is in column-reverse.html):
#container {
display: flex;
flex-direction: column-reverse;
border: 1px solid #000;
width: 400px;
}