title: How to align left last row/line in multiple line flexbox
body: <p>I have a major issue with flexbox layout. I build a container with a boxes filled with images, and i decided to use flexbox layout to justify the content to make it looks like a grid</p>
  
  <p>Her's the code:</p>
  
  <pre><code>&lt;div class="container"&gt;
  
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      ...
      &lt;div class="item"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>and the CSS:</p>
  
  <pre><code>.container {
      display: flex;
      display: -webkit-flex;
      display: -moz-flex;
      justify-content: space-around;
      -webkit-justify-content: space-around;
      -moz-justify-content: space-around;
      flex-flow: row wrap;
      -webkit-flex-flow: row wrap;
      -moz-flex-flow: row wrap;
  }
  
  .container .item { width: 130px; height: 180px; background: red; margin: 0 1% 24px; }
  </code></pre>
  
  <p>And everything looks good except the last line/row - when it not contain the same number of element that other lines, centering elements and it broke my grid effect.</p>
  
  <p><a href="http://jsfiddle.net/puz219/7Hq2E/" rel="noreferrer">http://jsfiddle.net/puz219/7Hq2E/</a></p>
  
  <p>How to align last line/row to left side?</p>