Getting Started With Flexbox

Lesson #5: Common Layouts (6:00)

WooOOO!!!!!!!!

You did it!

Hold on to your butts!

<div class="page">
<header></header>
<main></main>
<footer></footer>
</div>
.page {
display:flex;
flex-direction:column;
}

main{
flex:1 0 auto;
}
<header></header>
<div class="body">
<main></main>
<nav></nav>
<aside></aside>
</div>
<footer></footer>
.body {
display:flex;
flex-direction:row;
align-items:stretch;
justify-content:flex-start;
}

aside, nav {
flex: 0 0 8rem;
}

main {
flex: 1 1 auto;
}
aside {
order: 0;
}

main {
order: 1;
}

nav {
order: 2;
}

header

stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff

stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff

stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff

stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff

stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff

stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff

stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff

Write CSS asfastas you cansketch