# Flexbox Fundamentals
_by Garth Braithwaite_
Flexbox is a wonderful tool built into the CSS specification. Using flexbox doesn't require any special framework or library, just a browser with CSS3 support. It is so awesome, and makes the arranging elements on a page almost fun!
_Each lesson's code is in its corresponding lesson folder. Plunks are drawn from the lesson's branch._
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Flexbox Order</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="lib/app.css">
</head>
<body>
<header class="main-header">Header</header>
<nav class="main-nav">
<ul>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main class="main-content">Content</main>
<footer class="main-footer">Footer</footer>
</body>
</html>
body {
background: white;
font-family: 'Open Sans', sans-serif;
}
.main-nav li {
width: 100px;
}
.main-nav a {
text-decoration: none;
color: black;
font-size: 21px;
font-weight: 600;
color: #00a9d9;
}
.main-nav a:hover {
text-decoration: underline;
}
.main-nav ul {
list-style: none;
display: flex;
}
.main-header {
background: #B61E32;
padding: 10px;
}
.main-content{
background: #F7CE2B;
min-height: 40vh;
padding: 10px;
}
.main-footer{
background: #ABC999;
padding: 10px;
order: 1;
}
body {
display: flex;
flex-direction: column;
}
.main-nav {
order: -1;
}