Edit in JSFiddle

<div class="container">
    <header>Header</header>
    <nav>Nav</nav>
    <section>The CSS flexbox layout is the widely discussed/suggested/encouraged/used layout of these days. You must be wondering why? Why is that many developers give that ah! look when they are advised to use flexbox? Well, it's because it provides the most efficient way of aligning, resizing, stretching the elements in the most appropriate way. It is a big help in laying out the dynamic layouts, because it stretches and shrinks depending on the available space. No JavaScript required.</section>
    <aside>Aside</aside>
    <footer>Footer</footer>
</div>

body{ color: white; font: normal 22px/1em Calibri, Helvetica; }
.container{ display: flex; flex-flow: row wrap; border: 1px solid voilet; }
header{ flex: 1 100%; background: DarkCyan; }
nav{ flex: 1 auto; background: SaddleBrown; }
section{ flex: 4 0px; background: Peru; }
aside{ flex: 1 auto; background: Maroon; }
footer{ flex: 1 100%; background: OliveDrab; }