HTML and CSS Reference
In-Depth Information
Figure 22-32. Each book description fills the full width of the page
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;
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.
Search WWH ::

Custom Search