Flexbox 子项的折叠边距

Posted 2023-03-06

【中文标题】Flexbox 子项的折叠边距

【英文标题】：Collapsing margin on Flexbox children

【发布时间】：2015-01-19 11:01:07

【问题描述】：

我通过带有 flex-wrap 的 flexbox 和能够使用 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

【参考方案1】：

另一个技巧是在容器和项目之间分割保证金责任，各占一半（比如$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 关心 top 和 半左 + 半右：

.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。

【参考方案2】：

这有点小技巧，但您可以在 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

【讨论】：

似乎包装器可能是唯一的解决方案，除非任何人都可以建议一个纯 flexbox 解决方案。

为我工作。必须将容器放在另一个容器中，然后将边距添加到最外面的容器，因为容器会吃掉外部的任何边距，而这些边距不是由每个 flexbox 元素添加的。不过很好的解决方案，肯定会使用它。