设置弹性框项目之间距离的更好方法

要设置我使用 Flexbox 的项目之间的最小距离margin: 0 5px上.item和margin: 0 -5px集装箱。对我来说，这似乎是一种 hack，但是我找不到更好的方法来做到这一点。

例 

#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>

答案