title: Flexbox layout with multiple rows having 3 items in each
body: <p>I am trying to have the 3 unordered list items take up the whole block spaced out evenly, with the 1st one at the start the 2nd one in the middle and the last one touching the end of the block. </p>
  
  <p>I am trying to do it with flex box but currently I am having difficulty, I figured justify-content: would work for this task, but its not doing anything.</p>
  
  <p>Here is the end result I am trying to achieve:</p>
  
  <p><a href="https://i.stack.imgur.com/PH91Y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PH91Y.png" alt="final"></a></p>
  
  <p><a href="http://codepen.io/staycreativedesign-1472670666/pen/jBRmyd" rel="nofollow noreferrer">link to codepen</a></p>
  
  <p><strong>Example:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: green;
  }
  
  .area--third-amenities--list {
    width: 375px;
    background: blue;
  }
  
  ul {
    padding: 0;
    list-style-type: none;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  ul li {}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="area--third-amenities--list"&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;img src="http://i.imgur.com/PwKgUnO.png" /&gt;
        &lt;p&gt;
          50px
        &lt;/p&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;img src="http://i.imgur.com/PwKgUnO.png" /&gt;
        &lt;p&gt;
          50px
        &lt;/p&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;img src="http://i.imgur.com/PwKgUnO.png" /&gt;
        &lt;p&gt;
          50px
        &lt;/p&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;img src="http://i.imgur.com/PwKgUnO.png" /&gt;
        &lt;p&gt;
          50px
        &lt;/p&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;img src="http://i.imgur.com/PwKgUnO.png" /&gt;
        &lt;p&gt;
          50px
        &lt;/p&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;img src="http://i.imgur.com/PwKgUnO.png" /&gt;
        &lt;p&gt;
          50px
        &lt;/p&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>