What Next? - Beginning CSS3 - page 478

In fact, to give my own book PHP Solutions more prominence, I promoted it to the first column in books2.
html by adding this simple style rule:

article:last-child {
order: -1;
}

If you check books1.html and books2.html, you'll see the HTML is identical in both files. But if you load
books2.html into Chrome 21 or later, the order of columns has changed, as shown in Figure 22-2 .

Figure 22-2. Changing the order of flex items is trivially easy

■ This chapter describes what is expected to be the final syntax for flex layout. It does not discuss earlier,
quite different versions of the syntax used by Firefox 14, Safari 6, older versions of Chrome, and the Developer
Preview of IE 10. If you load books1.html and books2.html into a browser that doesn't understand flex layout, the
<article> elements are stacked on top of each other, and the images are between the text and the Buy Now button.

Note

Understanding Flex Layout Terminology
Flex layout anticipates some changes to web layout that aren't currently supported by any browser. In particular,
it's designed to work not only with left-to-right languages like English and other European languages, and
right-to-left languages, such as Arabic. The Flexible Box Layout module also anticipates browser support for
displaying Japanese and Chinese in the traditional top-to-bottom and right-to-left format. This affects the flow
within a flex container, which can display items either in rows or columns.