Flexbox儿童折叠边距

2018-06-29 14:31:30

我通过flexbox使用flex-wrap和元素可以使用flex-grow来进行下列安排：

每个项目都有边缘。这是为了将项目彼此分开，但副作用是整个块有我想要崩溃的余量。它可以通过像nth-child(-n+3) { margin-top: 0; } nth-child(-n+3) { margin-top: 0; }但由于容器大小可能会有所不同，因此每行和任意数量的行可能有任意数量的项目。所以我想知道如果弹性盒有任何方法来折叠这样的设置中的外边距，同时保留项目之间的边距。

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

这有点破解，但是你可以在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

链接地址: http://www.djcxy.com/p/82635.html

上一篇: Collapsing margin on Flexbox children

下一篇: How do you ignore Whitespace when using CsvHelper, CsvReader.Read()?