# 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 name="description" content="A simple example of using flex-direction to ">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Flex Direction | Egghead</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>
<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>
</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;
flex-direction: column;
}