css - 折叠 Flexbox child 的边距

Question

我通过带有 flex-wrap 的 flexbox 和能够使用 flex-grow 拉伸(stretch)的元素进行了以下安排:

每个元素的所有边都有边距。这是为了将元素彼此分开，但副作用是整个 block 都有我想折叠的边距。可以使用 nth-child(-n+3) { margin-top: 0; 这样的规则来完成。 } 但由于容器大小可能会有所不同，因此每行和任意数量的行可能有任意数量的元素。所以我想知道 flex-box 是否有办法在这样的设置中折叠外边距，同时保留元素之间的边距。

JSBin

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

Answer 1

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

Updated 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