在Flexbox子级上折叠边距

Question

我通过flexbox使用flex-wrap进行以下安排,并且元素能够使用flex-grow进行拉伸:

每个项目都有一个边距.这是为了将项目彼此分开,但副作用是整个块具有我想要折叠的边距.它可以通过类似的规则来完成,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

这有点像黑客,但你可以在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