Edit in JSFiddle

<a href="https://youtu.be/eUF-dtI0GSw?t=3m34s" target="_blank">출처 : https://youtu.be/eUF-dtI0GSw?t=3m34s</a>

<div class="wrap">
  <header>1. header</header>
  <div>
    <article>2. main</article>
    <nav>3. nav</nav>
    <aside>4. aside</aside>
  </div>
  <footer>5. footer</footer>
</div>

/* for demo style */
body {
  height: 300px;
}
.wrap {
  margin-top: 20px;
  padding: 5px;
  background: #ddd;
}

header, article, nav, aside, footer {
  margin: 5px;
  padding: 10px;
  border-radius: 2px;
  background: #000;
  font-size: 20px;
  color: #fff;
  text-align: center;
}

/* flexible layout */
.wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.wrap > div {
  display: flex;
  flex: 1;
}

article {
  flex: 1;
}

nav {
  order: -1;
}