eggheadio-projects/flexbox-fundamentals: null

# Flexbox Fundamentals
_by Garth Braithwaite_

![](https://d2eip9sf3oo6c2.cloudfront.net/series/square_covers/000/000/036/full/EGH_Flexbox.png?1496436393)

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 Sizing</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>
<body>
  <h1 class="title-1">Garth</h1>
  <h1 class="title-2">is</h1>
  <h1 class="title-3">Rad</h1>
</body>
</html>

body {
  margin: 0;
  display: flex;
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  color: #eec965;
}

.title-1 {
  background: #dd5f40;
  flex: 1;
    /* flex-grow: 1;
       flex-shrink: 1;
       flex-basis: 0;
    */
}

.title-2 {
  background: #3d483a;
  flex: 20px;
    /* flex-grow: 1;
       flex-shrink: 1;
       flex-basis: 20px;
    */
}

.title-3 {
  background: #468e5d;
  flex: 0 80px;
    /* flex-grow: 0;
       flex-shrink: 1;
       flex-basis: 80px;
    */
}

h1 {
  flex-basis: 0;
}