title: Flexbox tile layout with consistent margins and alignment
body: <p><strong>How might we achieve the following layout:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/21Lbr.png" alt="enter image description here"></p>
  
  <p><strong>With the following conditions:</strong></p>
  
  <ol>
  <li><p>The tiles of each row should be equal in height to the highest element in the row</p></li>
  <li><p>The last tile in the row should be flush with the parent container (no gap)</p></li>
  <li><p>The tiles can be different width ratios (3 times one-third or one-third + two-thirds, etc)</p></li>
  <li><p>The ordering of the tiles is unknown</p></li>
  <li><p>No grid framework</p></li>
  <li><p>Modern browsers only</p></li>
  </ol>
  
  <p><strong>And the following markup:</strong></p>
  
  <pre><code>&lt;div class="tile-wrapper"&gt;
    &lt;div class="tile-container"&gt;
      &lt;div class="tile third"&gt;1/3&lt;/div&gt;
      &lt;div class="tile third"&gt;1/3&lt;/div&gt;
      &lt;div class="tile third"&gt;1/3&lt;/div&gt;
      &lt;div class="tile two-thirds"&gt;2/3&lt;/div&gt;
      &lt;div class="tile third"&gt;1/3&lt;/div&gt;
      &lt;div class="tile sixth"&gt;1/6&lt;/div&gt;
      &lt;div class="tile sixth"&gt;1/6&lt;/div&gt;
      &lt;div class="tile third"&gt;1/3&lt;/div&gt;
      &lt;div class="tile sixth"&gt;1/6&lt;/div&gt;
      &lt;div class="tile sixth"&gt;1/6&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>