title: How to center a Flex list container with wrap and justify to flex-start elements
body: <p>I have some issues implement Flex-box, in my requirement for a view I have a list of cards, each card has a default width and height. I can use flex box and I prefer it.
  When the elements of the list don't fit in the row, they should wrap in a new one, always from the left to the right, and all the list be centered in the available space of the container.</p>
  
  <p>Here is <a href="https://plnkr.co/edit/uXh4zf?p=preview" rel="nofollow noreferrer"><strong>a plunker</strong></a> of the layout and <strong>the code</strong>: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.list {
    display: flex;
    flex-grow: 0;
    flex-shrink: 1;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .item {
    width: 200px;
    height: 300px;
    border: 1px solid black;
    background-color: #e6e6e6;
    margin: 12px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div class="list"&gt;
      &lt;div class="item"&gt;someItem01&lt;/div&gt;
      &lt;div class="item"&gt;someItem02&lt;/div&gt;
      &lt;div class="item"&gt;someItem03&lt;/div&gt;
      &lt;div class="item"&gt;someItem04&lt;/div&gt;
      &lt;div class="item"&gt;someItem05&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>This is what I'm trying to achieve:</strong> 
  <a href="https://i.stack.imgur.com/jlBKw.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jlBKw.jpg" alt="enter image description here"></a></p>
  
  <p><strong>And this is what I currently have:</strong>
  <a href="https://i.stack.imgur.com/o6vli.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o6vli.jpg" alt="enter image description here"></a></p>
  
  <p>How can I achieve the this without recurring to bunch of media queries, hard-coded margin/padding, etc?</p>