Usando Flexbox possiamo creare facilmente il design di un header con i CSS.
Partiamo dalla seguente marcatura:
<header id="masthead">
<h1 id="site-title">Site title</h1>
<nav id="main-navigation">
<a href="" class="current-nav-item">Home</a>
<a href="">About</a>
<a href="">Contact</a>
</nav>
</header>
Vogliamo che il titolo e la navigazione appaiano rispettivamente a sinistra e a destra del loro contenitore. Possiamo usare il valore space-between della proprietà justify-content.
#masthead {
margin: 0 auto;
max-width: 1024px;
padding: 1em 0;
border-bottom: 1px solid #ddd;
display: flex;
justify-content: space-between;
}