在Flexbox子级上折叠边距

时间:2014-11-21 10:19:11

标签: css margin flexbox

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

flexbox

每个项目的各方都有边距。这是为了将项目彼此分开,但副作用是整个块具有我想要崩溃的边缘。可以使用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

2 个答案:

答案 0 :(得分:5)

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

答案 1 :(得分:0)

另一种方法是在容器和物品之间划分保证金责任每个关怀大约一半(例如$margin1em):< / p>

容器关心其项目的底部边距左半边+半右

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

关于项目大小,如果您希望项目看起来相同,可以设置width

.item.fixed {
   width: 15em;
}

查看demo here