HTML and CSS Reference
Figure 22-31. Flex items can be aligned in a variety of ways in a flex container
eXerCISe: BOOK DeSCrIptIONS
The following exercise shows how to convert Listing 22-1 into a three-column display of books (see
Figures 22-1 and 22-2 ) using flex layout.
Use as your starting point books_begin.html and styles/books_begin.css in the ch22 folder. At the time of
this writing, the only browser that supports the final syntax of flex layout is Chrome 21 with the
-webkit- browser-specific prefix. The instructions include both the prefixed and unprefixed properties.
By the time you read this, other browsers are likely to have adopted the new syntax with or without
prefixes. Check http://caniuse.com/#feat=flexbox for up-to-date details.
Load the page into a browser. It has been given a few basic styles, but all three
book descriptions fill the width of the screen and are stacked on top of each other.
Figure 22-32 shows the first book. Everything is left-aligned, and the topic image is
between the text and the Buy Now button.