# 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>Multiline Flexbox</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="lib/app.css">
</head>
</head>
<body>
<figure>
<img src="https://unsplash.it/150/150?image=931" width="150" height="150" alt="random image"/>
<figcaption>Paul Earle</figcaption>
</figure>
<figure>
<img src="https://unsplash.it/150/150?image=968" width="150" height="150" alt="Paul Itkin"/>
<figcaption>Paul Itkin</figcaption>
</figure>
<figure>
<img src="https://unsplash.it/150/150?image=974" width="150" height="150" alt="Greg Rakozy"/>
<figcaption>Greg Rakozy</figcaption>
</figure>
<figure>
<img src="https://unsplash.it/150/150?image=973" width="150" height="150" alt="Cameron Kirby"/>
<figcaption>Cameron Kirby</figcaption>
</figure>
<figure>
<img src="https://unsplash.it/150/150?image=965" width="150" height="150" alt="Liane Metzler"/>
<figcaption>Liane Metzler</figcaption>
</figure>
<figure>
<img src="https://unsplash.it/150/150?image=961" width="150" height="150" alt="Sven Scheuermeier"/>
<figcaption>Sven Scheuermeier</figcaption>
</figure>
<figure>
<img src="https://unsplash.it/150/150?image=966" width="150" height="150" alt="Alberto Restifo"/>
<figcaption>Alberto Restifo</figcaption>
</figure>
</body>
</html>
html{
height: 100%;
}
body {
margin: 0;
font-family: 'Open Sans', sans-serif;
margin: 0;
height: 100%;
}
figure {
margin: 0;
display: block;
height: 150px;
flex: 0 150px;
position: relative;
}
figcaption {
background: rgba(0,0,0,0.5);
display: block;
position: absolute;
bottom: 0px;
width: 100%;
text-align: center;
color: white;
padding: 4px;
box-sizing: border-box;
}
body {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-content: space-around;
}