Flexbox子元素的折叠边距问题

Question

我使用flexbox和flex-wrap来排列一组元素，并且这些元素可以使用flex-grow进行伸展：

每个项目都有四个方向的外边距，以使它们彼此分开。但是这样做的副作用是整个块都有外边距，我希望这些外边距能够折叠起来。可以使用诸如nth-child(-n+3) { margin-top: 0; }之类的规则来实现，但由于容器大小可能会变化，所以每行可能会有不同数量的项和任意数量的行。因此，我想知道在这种设置中，flex-box是否有任何方法可以折叠外边距，同时保留项之间的边距。

JSBin

HTML只是一个容器内的6个项目。

Sass CSS如下：

.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

- mahemoff

Answer 1

这种方法有些取巧，但你可以在 flex 容器上添加负边距来抵消项沿边缘的边距，然后将其“背景”样式移动到父包装元素。

更新的 JSBin

更新的 CSS（SASS）：

.wrapper
  background: #eef
  border: 1px solid darkgray

.container
  display: flex
  flex-wrap: wrap
  margin: -1em

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

- dholbert

---

似乎包装器可能是唯一的解决方案，除非有人能提出一个纯粹的flexbox解决方案。 - mahemoff

对我有用。必须将容器放在另一个容器中，然后由于容器吃掉了每个 flexbox 元素没有添加的外部边距，所以要向最外层容器添加边距。不过这是一个好的解决方案，我一定会使用它。 - Don Cullen

Answer 2

另一个技巧是在容器和项目之间分割边距的责任，让它们各自负责一半（假设$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
}

• items 关注 顶部 和 左右两侧各一半：

.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;
}

在这里查看演示。

- Jérôme Beau