HTML and CSS Reference
In-Depth Information
Figure 22-1.
Flex layout makes it easy to align elements within their containers
The example in Figure
22-1
is in books1.html in the ch22 folder. Listing 22-1 shows how the HTML is
structured. It consists of an HTML5
<section>
element containing an
<article>
for each book. Only the
first
<article>
is shown in detail.
Listing 22-1.
HTML Structure for Book Descriptions
<section id="books">
<article>
<h3>HTML5 and CSS3 Web Design</h3>
<p>A contemporary update of Craig Grannell's acclaimed. . .</p>
<ul>
<li>Learn the basics of HTML5 and CSS3 web design</li>
<li>Implement effective layouts. . . </li>
</ul>
<figure><img src="images/html5_css3.png" width="277" height="350". . .></figure>
<button>Buy Now</button>
</article>
<article>. . .</article>
<article>. . .</article>
</section>
Notice that the image comes between the text and the button in the underlying HTML, yet it's displayed after
the
<h3>
heading. The order of elements has been changed with CSS. That's something a table could never achieve.
