Spacing between flex elements?
<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>