title: Spacing between flex elements?
body: <p><a href="https://jsfiddle.net/zLoyr0oe/1/" rel="noreferrer">JSFiddle</a></p>
  
  <p>I have a list displayed with flex:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;/li&gt;
      ....
  
  ul{
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    background: gold;
  }
  
  li{
      flex-basis: 25%;
      background:grey;
   }
  </code></pre>
  
  <p>Now I want some space between my li elements, adding margin or padding pushes the elements on to the next line (I want flex wrap for when I have more than 4 elements).</p>
  
  <p>I know the above can be solved with box sizing, but my main problem is that I want spacing between the elements, but with the first and last element to line up to the left and right side of the parent element.</p>
  
  <p>How can this be achieved?</p>
  
  <p>eg.</p>
  
  <pre><code>|li|spacing|li|spacing|li|spacing|li|
  </code></pre>