Website Header with Flexbox (Part 1)

Styling a web site header with flexbox. Part 1: vertical split for logo and navigation.

by Sebastian

HTML

<div id="toparea">
   <header role="banner">Logo</header>
   <nav role="navigation">Navigation</nav>
</div>

CSS

#toparea {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: stretch;
}
#toparea > header {
  flex-grow: 0;
}
#toparea > nav {
  flex-grow: 1;
}

/* Styling */
#toparea {
    height:10em;
    background-color: #004600;
    padding:0.4em;
}
#toparea header,
#toparea nav {
    min-height:4em;
    min-width:4em;
    padding: 0.2em;
}
#toparea header {
    background-color: #DECA90;
}
#toparea nav {
    background-color: #f5ecd0;
}