CSS Master

(Primo) #1
<li><a href="/tag/javascript/">JavaScript</a></li>
<li><a href="/tag/python/">Python</a></li>
<li><a href="/tag/nginx">Nginx</a></li>
<li><a href="/tag/sass/">Sass</a></li>
<li><a href="/tag/sql/">SQL</a></li>
<li><a href="/tag/software/">Software</a></li>
<li><a href="/tag/ruby/">Ruby</a></li>
<li><a href="/tag/wordpress/">WordPress</a></li>
<li><a href="/tag/xhr/">XHR</a></li>
</ul>
</section>
<!-- Contact -->
<section id="contact">
<h2>Contact Us</h2>
<p>SitePoint Pty Ltd<br>48 Cambridge St,<br>Collingwood VIC
layouts-tabflexbox 3066<br>Australia</p>
</section>
<!-- Copyleft -->
<p class="copyleft">
<b>©</b> 2015. No rights reserved.
</p>
</footer>

Oursourceorderdoesn'tmatchourrenderingorder.Inthesource,oursearchbox
isfirst,followedbythelistoftags,address,andcopyleftnotice.Whatkindof
trickeryisthis?HerearetherelevantportionsofourCSS:

04-layouts/flex-footer.html (excerpt)
form {
flex-wrap: wrap;
flex: 0 0 30%;
order: 1
}

[id=topics] {
flex: 1 1 auto;
order: -1
}

[id=copyleft] {
flex: 0 0 100%;
order: 1;
}

182 CSS Master

Free download pdf