HTML and CSS Reference
In-Depth Information
Figure 22-32.
Each book description fills the full width of the page
2.
Give the
<section>
element a fixed width and center it by setting its horizontal
margins to
auto
. Also convert it into a flex container by setting its
display
property.
The
<section>
has the ID
books
, so amend its style rule like this:
#books {
background-color: #CCC;
padding: 5px;
width: 1000px;
margin: 0 auto;
display: -webkit-flex;
display: flex;
}
3.
Save the style sheet, and load the page into the latest version of Chrome or a
browser that supports the final flex syntax. The flex container defaults to a single
row because the styles for the
books<section>
don't set the
flex-direction
or
flex-flow
properties. As a result the three
<article>
elements have been laid out
alongside each other in equal-height columns. But they're not of equal width, and
the layout looks rather haphazard, as Figure
22-33
shows.
