Spacing between flex elements?

Issue

JSFiddle

I have a list displayed with flex:

<ul>
    <li></li>
    ....

ul{
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  background: gold;
}

li{
    flex-basis: 25%;
    background:grey;
 }

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).

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.

How can this be achieved?

eg.

|li|spacing|li|spacing|li|spacing|li|

Solution

Check this out- I used calc to adjust the flex-basis to allow custom margins that you can distribute for the ul (used justify-content: space-between for distributing that margin).

ul {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: gold;
  margin: 10px;
  padding: 0;
  height: 100px;
}
li {
  flex-basis: calc(25% - 20px);
  background: grey;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Let me know your feedback on this. Thanks!

Answered By - kukkuz