Flexboxgrid 和间隙溢出问题答案

【问题标题】：Flexboxgrid and gap overflow issueFlexboxgrid 和间隙溢出问题
【发布时间】：2022-09-27 19:29:43
【问题描述】：

我使用 flexboxgrid 库来创建简单的响应式布局，我有一个这样的父 div

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

孩子们有 flexboxgrid 样式

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

并且它工作得很好，除非我把那个 \'gap: 2rem\' 放在父级上，然后 div\'s 开始溢出并将最后一个项目推到另一行。

为了说明问题：

我该如何解决？

编辑：链接到 CodePen，间隙有 2 行，没有间隙 1 行。如何保持间隙，保持在 1 行？

【解决方案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>

【讨论】：

【解决方案2】：

列类（col-xs-12 col-md-6 col-lg-4）表示它的百分比宽度，这就是问题所在，因为百分比计算中不包括间隙。

我对此的看法是允许列缩小和增长，但仅限于您定义的间隙量。以您的示例为例：

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

唯一的问题是如果有一个空白空间或者它是唯一的列而不是全宽，则与列宽略有不一致。

【讨论】：