Spacing between flex elements?

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!

Tags:

Html

Css

Flexbox

Recent Posts