<!doctype html>
<title>Flex guide</title>
<body>
  <header>Header</header>
  <div id="main">
    <article>Article</article>
    <nav>Nav</nav>
    <aside>Aside</aside>
  </div>
  <footer>Footer</footer>
</body>
* {
  box-sizing: border-box; 
}
body {
  margin: 0;
}
#main {
  display: flex;
  min-height: calc(100vh - 40vh);
}
#main > article {
  flex: 1;
}
#main > nav, 
#main > aside {
  flex: 0 0 20vw;
  background: beige;
}
#main > nav {
  order: -1;
}
header, footer, article, nav, aside {
  padding: 1em;
}
header, footer {
  background: yellowgreen;
  height: 20vh;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.