title: Align flex items with different heights in the same container
body: <p>I wonder if it's possible to get flex items horizontally aligned to larger flex items in the same container. Using CSS floats it would be easily accomplished, but I haven't been able to get it done with flex items. </p>
  
  <p><a href="https://jsfiddle.net/vc00cbLu/1/">View this JSFiddle for a flexbox example.</a></p>
  
  <p><a href="https://jsfiddle.net/tp7dp1kL/2/">View this JSFiddle a float example</a></p>
  
  <p><em>Grid layout</em></p>
  
  <pre><code>&lt;div class="flex-container"&gt;
   &lt;div class="large-flex-item"&gt;
  &lt;/div&gt;
  &lt;div class="small-flex-item"&gt;
   &lt;/div&gt;
  &lt;div class="small-flex-item"&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><em>CSS</em></p>
  
  <pre><code> .flex-container {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     align-items: flex-start;
     max-width: 500px;
     margin-right: auto;
     margin-left: auto;
   }
  
   .small-flex-item {
     flex-basis: 33.333%;
     background: #000;
     padding-top: 30%;
   }
  
   .large-flex-item {
     flex-basis: 66.667%;
     background: #333;
     padding-top: 60%;
   }
  </code></pre>