有一个新的gapCSS属性，用于多列、flexbox和网格布局，现在可以在较新的浏览器中使用！（请参阅我可以使用链接1吗？链接2）。它是row-gap和rain-gap的简写。

#box {
  display: flex;
  gap: 10px;
}

flexbox和网格布局的row-gapCSS属性允许您在行之间创建间隙。

#box {
   display: flex;
   row-gap: 10px;
}

多列、flexbox和网格布局的CSS属性允许您在列之间创建间隙。

#box {
  display: flex;
  column-gap: 10px;
}

#box {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  background-color: red;
  gap: 10px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
  border: 1px black solid;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

在~2020²之前，Flexbox没有类似于边界-行间距的表格。下面的答案来自那个时候。现在，gap属性实现了这个角色，推荐用于这个应用程序。

Flexbox没有折叠边距¹。因此，实现您所要求的有点困难。

根据我的经验，不使用： first-child/：last-child并且在flex-包装：包装上不做任何修改的“最干净”的方法是在容器上设置填充：5px，在子对象上设置边距：5px。这将在每个孩子之间以及每个孩子与其父对象之间产生10px间隙。

JSFiddle演示

.upper {
  margin: 30px;
  display: flex;
  flex-direction: row;
  width: 300px;
  height: 80px;
  border: 1px red solid;

  padding: 5px; /* this */
}

.upper > div {
  flex: 1 1 auto;
  border: 1px red solid;
  text-align: center;

  margin: 5px;  /* and that, will result in a 10px gap */
}

.upper.mc /* multicol test */ {
  flex-direction: column;
  flex-wrap: wrap;
  width: 200px;
  height: 200px;
}

<div class="upper">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

<div class="upper mc">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

Bootstrap及其网格布局系统也使用了相同的技术。不过，Bootstrap对其列使用了填充而不是边距。

.row {
  margin:0 -15px;
}
.col-xx-xx {
  padding:0 15px;
}