Better way to set distance between flexbox items

by

To set the minimal distance between flexbox items I’m using margin: 0 5px on .item and margin: 0 -5px on container. For me it seems like a hack, but I can’t find any better way to do this.

#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}

.item {
  background: gray;
  width: 50px;
  height: 50px;
  margin: 0 5px;
}
<div id='box'>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

4
41

Leave a Comment