Flexboxgrid和间隙溢出问题

Question

我使用flexboxgrid库创建简单的响应性布局，我的父div样式如下

display: flex;
flex-wrap: wrap;
gap: 2rem;

儿童采用柔性格子造型。

col-xs-12 col-md-6 col-lg-4

除此之外，它的效果很好，除非我将“差距:2 2rem”放在父母身上，然后div的开始溢出，并将最后一项推到另一行。

为了说明问题：

​

​

我怎么才能修好它？

编辑:链接到CodePen，gap有2行，没有间隙1行。如何保持差距，保持一排？

https://codepen.io/ShinigamiZ/pen/YzezgwE

Answer 1

如果要将它们扩展到整个宽度，不要为元素设置flex-basis。而是设置flex-grow: 1。这意味着，元素将增长到尽可能大。

如果您想将它们包装到一个新的行中，则需要更改flex-basis的计算，以合并间隙。

​

.parent {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  background-color: yellow;
}

.sib {
  background-color: gray;
  flex-grow: 1;
}

<div class='parent'>
  <div class='sib'>
    123
  </div>
  <div class='sib'>
    123
  </div>
  <div class='sib'>
    123
  </div>
</div>

​

Answer 2

列类( Column 12 Column 6 Column 4)意味着它的百分比宽度，这是问题所在，因为差距不包括在百分比计算中。

我对此的看法是，允许列缩小和增长，但只能通过您定义的空白量来实现。以您的例子来说，这可能是这样的：

.col-md-6 {
  flex: 1 0 calc(50% - 2rem);
  max-width: 50%;
}

唯一的问题是与列宽度有轻微的不一致，如果有一个空的空间，或者它是唯一的列，而不是全宽度，因为元素有它们自己的初始百分比宽度，而不是减少一个空白。

https://codepen.io/Erehr/pen/jOxYadW