O'Reilly logo

Cross-platform Desktop Application Development: Electron, Node, NW.js, and React by Dmitry Sheiko

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Styling the footer

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required