title: Flexbox - Using "Space-between" whilst aligning items left
body: <p>I'm attempting to implement flexbox and have hit a brick wall. I have a row of items that can range from 1 to 4. When all four items are visible, the "space-between" attribute works perfectly ensuring the space between each items are correct and doesn't have a space on the left of the first item, or the right of the last item. The entire container is taken up. This is great. </p>
  
  <p>However, if I have 2 or 3 items, it goes a bit wrong. Flexbox naturally provides a space between those items. If there are 2 items, one is aligned left and the other right. If there are three, the second is naturally in the centre.</p>
  
  <p>The issue I'm having is that I want to be able to define the widths of my items, but not the margins. Otherwise during the responsiveness I would have to eliminate the margins on odd / evens / first / last etc to ensure the entire container is taken up.</p>
  
  <p>Is there a way to use the "space-between" functionality to automatically adopt the correct margins between each item, but ensure all items are aligned to the left if there are less than 4?</p>
  
  <p>My example below shows the natural outcomes. The last item is how i'd like it to work. I have however had to define a margin for each, something I want to avoid.</p>
  
  <p>Any help would be appreciated.</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>.row {
    width:1280px;
    margin:0 auto 0;
    margin-bottom:20px;
    background:#ebebeb;
  }
  
  ul {
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
    justify-content:space-between;
  }
  
  li {
    width:23%;
    background:#999
  }
  
  .row--ideal ul {
      justify-content:flex-start;  
  }
  
  .row--ideal ul li {
    margin-right:35px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;
    &lt;ul&gt;
      &lt;li&gt; Item 1 &lt;/li&gt;
      &lt;li&gt; Item 2 &lt;/li&gt;
      &lt;li&gt; Item 3 &lt;/li&gt;
      &lt;li&gt; Item 4 &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
    &lt;ul&gt;
      &lt;li&gt; Item 1 &lt;/li&gt;
      &lt;li&gt; Item 2 &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
    &lt;ul&gt;
      &lt;li&gt; Item 1 &lt;/li&gt;
      &lt;li&gt; Item 2 &lt;/li&gt;
      &lt;li&gt; Item 3 &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class="row row--ideal"&gt;
    &lt;h3&gt;Ideal Result&lt;/h3&gt;
    &lt;ul&gt;
      &lt;li&gt; Item 1 &lt;/li&gt;
      &lt;li&gt; Item 2 &lt;/li&gt;
      &lt;li&gt; Item 3 &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>