HTML and CSS Reference
In-Depth Information
The following examples use the shorthand flex-flow rather than the individual flex-direction and
flex-wrap properties.
Note
In the case of rows, reversing the cross axis means rows are stacked from bottom to top. The styles for the flex
container in row_wrap-reverse.html look like this:
#container {
display: flex;
flex-flow: wrap-reverse;
border: 1px solid #000;
width: 400px;
}
This produces the result shown in Figure 22-16 . The flex items are still laid out in the normal order along the
main axis (left to right), but the cross axis has been changed, so the first row is at the bottom of the container.
Figure 22-16. The rows run from left to right, but start at the bottom of the flex container
In the case of columns, switching the cross axis in a left-to-right language like English results in the
columns being laid out from right to left, as shown in Figure 22-17 . The styles for the container<div> in
column_wrap-reverse.html look like this:
#container {
display: flex;
flex-flow: wrap-reverse column;
border: 1px solid #000;
width: 400px;
height: 120px;
}
Figure 22-17. The second column is displayed on the left
 
 
Search WWH ::




Custom Search