July 2017
Intermediate to advanced
300 pages
5h 43m
English
Eventually, we now reached the footer:
./index.html
... <footer class="l-app__footer footer"> <h2 class="footer__header">File Explorer</h2> <select class="footer__select"> <option value="en-US">English</option> <option value="de-DE">Deutsch</option> </select> </footer>
We arrange the application title to the left and language selector to the right. What do we use to lay this out? Obviously, Flexbox:
./assets/css/Component/footer.css
.footer { ... display: flex; flex-flow: row nowrap; justify-content: flex-end; } .footer__header { margin: 0.2em auto 0 0; font-size: 1em; }
It's a special case. We set items to align right in general, but have reset it for the .footer__header item that snuggles against the left ...
Read now
Unlock full access