title: Evenly distribute elements in columns
body: <p>I have a single div named <code>.wrap</code> within which items are placed. An unknown amount of items (<code>.thing</code>) should be arranged into four columns (stacking on top of each other). </p>
  
  <pre><code>&lt;div class="wrap"&gt;
      &lt;div class="thing"&gt; thing1 &lt;/div&gt;
      &lt;div class="thing"&gt; thing2 &lt;/div&gt;
      ...
  &lt;/div&gt;
  </code></pre>
  
  <p>The columns need to be evenly distributed so that no column is empty. This would be very easy using:</p>
  
  <pre><code>.wrap {
      column-count: 4;
      column-fill: balance;
  }
  </code></pre>
  
  <p>However, <code>column-fill</code> only works in Firefox, I believe. </p>
  
  <p><strong>Is there another CSS method to achieve this layout in all recent versions of browsers?</strong> Specifically, would flexbox be able to help here?</p>
  
  <p>Please note that I cannot add extra divs to act as columns, and do not want a JS solution.</p>
  
  <p>Here is a fiddle which has the desired layout except for the even distribution → <a href="http://jsfiddle.net/bpdtkmmt/" rel="noreferrer">http://jsfiddle.net/bpdtkmmt/</a></p>