Website Header with Flexbox (Part 3)

Styling a web site header with flexbox. Part 3: stretched and bottom aligned navigation links.

by Sebastian

HTML

<div id="toparea">
   <header role="banner">Logo</header>
   <nav role="navigation">
       <div id="mainnavigation">
           <ul>
               <li><a>First</a></li>
               <li><a>Second</a></li>
               <li><a>Third</a></li>
               <li><a>Fourth</a></li>
           </ul>
       </div>
       <div id="secnavigation">Secondary Navigation</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;
    
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: stretch;
}
#secnavigation {
  flex-grow: 0;
  order: 1;
}
#mainnavigation ul,
#mainnavigation li {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: stretch;
}
#mainnavigation ul {
    align-items: stretch;
}
#mainnavigation li {
    align-items: flex-end;
}

/* Styling */
#toparea {
    height:12em;
    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;
}
#mainnavigation ul {
    margin: 0;
    padding: 0;
}
#mainnavigation li {
    margin: 0.2em;
    padding: 0.2em;
    border: solid 1px #004600;
}