title: Horizontal masonry layout with flexbox CSS only
body: <p>I'm trying to create a horizontal masonry layout using only CSS and flexbox. The problem I'm having is there are vertical gaps between the elements, without using <code>align-left: stretch;</code> is it possible to close the gaps?</p>
  
  <pre><code>.card-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; 
    align-items: flex-start;
  }
  
  
  .card {
    width: 25%;
    flex: 1 0 auto;
  }
  </code></pre>
  
  <p><a href="http://codepen.io/JulianNorton/pen/jExLWE">full codepen here</a></p>