CSS Master

Figure 4.44. Distributing flex items with justify-content: center

HereourTopicssubsectioncomesfirst,followedbytheContact Us,Search this site,
anda“copyleft”notice.Butthisiswhatourmarkuplookslike:

04-layouts/flex-footer.html (excerpt)

<footer class="flex align-top wrap">

<!-- Search form -->

<form class="flex wrap">

<div><label>Search this site</label></div>

<p class="flex same-height">

<input type="search">

<button type="submit">Search</button>

</p>

</form>

<!-- Topics -->

<section id="topics">

<h2>Topics </h2>

<ul class="taglist">

<li><a href="/tag/actionscript">ActionScript</a></li>

<li><a href="/tag/apache">Apache</a></li>

<li><a href="/tag/css3/">CSS3</a></li>

<li><a href="/tag/cyberduck/">Cyberduck</a></li>

<li><a href="/tag/devops/">DevOps</a></li>

<li><a href="/tag/http/">HTTP</a></li>

Complex Layouts 181