title: How to display wrapping flex items as space-between with last row aligned left?
body: <p>I have a fixed-width container into which several variable-width elements must appear in a row, which can spill over into additional rows as necessary. </p>
  
  <p>However, the beginning of each element must be aligned with the one on top of it, so in ASCII art it would look like so (say, padding of 1):</p>
  
  <pre><code>    /----------------------------------\
      |                                  |
      | # One    # Two   # Three  # Four |
      | # Five   # Six                   |
      |                                  |
      \----------------------------------/
  </code></pre>
  
  <p>In other words:</p>
  
  <ul>
  <li>The first element of every row must be left-aligned</li>
  <li>The last element of every row (except for the final row) must be right-aligned</li>
  <li>Every element must be left-aligned to the element above it</li>
  </ul>
  
  <p>I'm trying to use flexbox for this without success.</p>
  
  <p><a href="http://codepen.io/anon/pen/yeOLVK" rel="noreferrer">This</a> is the best I've come so far, using <code>flex-wrap: wrap</code> for the container and <code>flex-grow: 1</code> for the elements.</p>
  
  <p>Problem is that the last row fills out to the edge.</p>
  
  <pre><code>justify-content: flex-start; // this does nothing
  </code></pre>
  
  <p>If I take away <code>flow-grow: 1</code> then the elements aren't distributed equally. I also tried fiddling around with <code>last-of-type</code> on the elements but it's also not enough.</p>
  
  <p>Is this even possible with <code>flexbox</code>, or am I going about it the wrong way?</p>