Css 折叠Flexbox子项上的边距

我通过flexbox与flex wrap进行了以下安排，元素可以使用flex grow进行拉伸：

每件物品的四周都有边距。这是为了将项目彼此分开，但副作用是整个区块都有我想折叠的边距。可以使用诸如

nth child（-n+3）{margin top:0；}

之类的规则来完成，但是由于容器大小可能会有所不同，因此每行可以有任意数量的项，也可以有任意数量的行。所以我想知道flex box是否有办法在这样的设置中折叠外部边距，同时保留项目之间的边距

HTML只是容器中的6个项目

CSS（Sass）如下所示：

.container
  display: flex
  flex-wrap: wrap
  background: #eef
  align-items: stretch

.item
  flex-grow: 1  
  margin: 1em
  border: 1px solid black
  padding: 1em
  min-width: 6em

---

这有点像黑客，但您可以在flex容器上添加一个负边距，以抵消项目沿边距的边距，然后将其“背景”样式移动到父包装器元素

更新的CSS（SASS）：

另一个技巧是在容器和物品之间划分保证金责任，每个人都关心一半（比如

$margin

是

1em

）：

•容器关注其底部边距和项目的半左+半右：

.container {
   width: 100%;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;           // Go to next line if not enough space
   padding-top: 0;            // Let items handle top
   padding-left: $margin/2;   // Handle half of left
   padding-bottom: $margin;   // Handle bottom
   padding-right: $margin/2;  // Handle half of right
}

•项目关注左上半+右上半：

关于项目大小，如果希望项目外观相同，可以设置

宽度

.item.fixed {
   width: 15em;
}

请参阅。
似乎包装器可能是解决此问题的唯一方法，除非有人能推荐纯flexbox解决方案。为我工作。必须将容器放在另一个容器中，然后将边距添加到最外层的容器中，因为容器会吃掉外部没有由每个flexbox元素添加的边距。很好的解决方案，当然使用它。
.item {
   flex-grow: 1;             // Use available space
   margin-left: $margin/2;   // Handle other half of left
   margin-right: $margin/2;  // Handle other half of right
   margin-top: $margin;      // Handle top
}

.item.fixed {
   width: 15em;
}