<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>FlexBox Nav</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="elements">

    <div class="item">Hey!</div>
    <div class="item">Take my heart, don't break it</div>
    <div class="item large">Love me to my bones</div>
    <div class="item">All this time I've wasted</div>

    <div class="item">You were right there all along</div>
    <div class="item small">You and I stargazing</div>
    <div class="item">Intertwining souls</div>
    <div class="item small">We were never strangers</div>

    <div class="item large">You were right there all along</div>
    <div class="item">I lose my mind</div>
    <div class="item small">When I'm around you, how I come alive</div>
    <div class="item large">When I'm without you, I can't help but feel so lost</div>
    <div class="item">I wanna give you all I've got</div>

    <div class="item">(Oh-oh-oh)</div>

    <div class="item">They say you know it when you know it, and I know</div>
    <div class="item large">(Oh-oh-oh)</div>
    <div class="item">Promise that you'll hold me close, don't let me go</div>
    <div class="item small">(Hey!)</div>

    <div class="item">Take my heart don't break it</div>
    <div class="item">Love me to my bones</div>
    <div class="item large">All this time I've wasted</div>
    <div class="item">You were right there all along</div>

    <div class="item">You and I stargazing</div>
    <div class="item">Intertwining souls</div>
    <div class="item">We were never strangers</div>
    <div class="item">You were right there all along</div>

    <div class="item">All along</div>

    <div class="item">Take my heart, don't break it</div>
    <div class="item">Love me to my bones</div>
    <div class="item">All this time I wasted</div>
    <div class="item">You were right there all along</div>

  </div>

</body>
</html>
/* Some CSS Setup - nothing to do with flexbox */
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font-family: sans-serif;
  margin: 0;
  background-image: linear-gradient(260deg, #1e3a5f 0%, #5ca9d6 100%);
}

a {
  color:white;
}

.item.large {
  font-size: 40px;
}

.item.small {
  font-size: 20px;
}

.item {
  background:rgba(255,255,255,0.2);
  margin:10px;
  padding:20px;
  font-size: 30px;
}

/* Flexbox starts here: */
.elements{
  display: flex;
  flex-wrap: wrap;
}

.item{
  flex: 1 1 calc(33.33% - 20px)
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.