Website Header with Flexbox (Part 2)

Styling a web site header with flexbox. Part 2: horizontal split between navigation elements.

by Sebastian

HTML

<div id="toparea">
   <header role="banner">Logo</header>
   <nav role="navigation">
       <div id="mainnavigation">Primary</div>
       <div id="secnavigation">Secondary</div>
    </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;
    
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: stretch;
}
#mainnavigation {
  flex-grow: 1;
  order: 2;
}
#secnavigation {
  flex-grow: 0;
  order: 1;
}

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