基于Flexbox构建网格系统的边距与列宽问题咨询

我最近在学习用Flexbox搭建自己的网格系统，碰到了一个头疼的问题：当设置的列总宽度加起来刚好是容器的100%时（容器已经设了flex-flow: row wrap;），最后一列总是会被挤到下一行；但如果总宽度没到100%，比如一列30%、一列65%，它们就能正常在一行显示。后来发现这和边距有关，但试了好几种方法都没解决，现在有几个疑问想请教：

• 定义列宽的时候，应该用flex-basis还是width？
• 怎么解决边距导致的换行问题？
• 看到很多GitHub项目里用gap属性，这个到底是怎么工作的？我试着用calc()减去预设的$gap值，还是达不到预期的网格效果。

一、flex-basis vs width：该选哪个？ #

在Flexbox布局里，flex-basis是专门用来定义flex项在分配剩余空间之前的初始大小的，优先级比width更高（当flex项是行内元素时，height同理）。所以做网格系统时，优先用flex-basis来定义列的基准宽度会更贴合Flexbox的设计逻辑，尤其是结合flex-grow和flex-shrink一起使用时，能更灵活地控制列的缩放行为。

如果只设置width，在某些场景下（比如flex容器有剩余空间或者空间不足），Flexbox可能会忽略width的值，而flex-basis会作为更可靠的初始宽度参考。

二、解决边距导致的换行问题 #

你碰到的核心问题是盒模型的默认行为：当你给列设置了width或flex-basis，再加上边距（margin），元素的总宽度就会变成「设置的宽度 + 边距」，超过容器的100%宽度，最后一列就会被挤换行。这里有两种靠谱的解决方法：

方法1：用Flexbox的gap属性（推荐） #

gap是Flexbox（还有Grid）原生支持的间距属性，它直接在flex项之间创建间距，而且不会把间距算进元素的宽度里，完美避开了盒模型的问题。你只需要给容器.row加上gap: $gap;就行，不需要再手动用calc()去减边距，代码会简洁很多：

.row { 
  display: flex;
  flex-flow: row wrap;
  gap: $gap; // 直接设置列之间的间距
}

它的工作原理是：浏览器会自动在flex项之间分配这个间距，而且不会影响每个列的宽度计算，相当于把间距从容器的可用空间里单独扣出来，剩下的空间再分给各个列。

方法2：用calc()精确计算宽度（兼容旧浏览器） #

如果需要兼容不支持gap的旧浏览器（比如IE11），可以用calc()把边距从列的宽度里减去，但要注意：如果是n列一行，每一行里的列之间的间距数量是n-1个，所以你需要把总间距平均分摊到每个列的宽度里。

比如你的网格是12列，每列的宽度应该是：

// 以桌面端为例
.col-fhd-#{$i} {
  flex-basis: calc( (100% / #{$grid-cols} * #{$i}) - #{$gap} * (#{$grid-cols} - #{$i}) / #{$i} );
  margin-right: $gap;
}
// 还要给最后一列去掉右边距
.row > *:last-child {
  margin-right: 0;
}

不过这种方法比较繁琐，不如gap省心，所以优先推荐用gap。

三、优化后的完整代码示例 #

结合上面的建议，你可以把代码改成这样，既解决了换行问题，又符合Flexbox的最佳实践：

$grid-cols: 12;
$gap: 0.75rem !default;

// 列容器
.row { 
  display: flex;
  flex-flow: row wrap;
  gap: $gap; // 统一设置间距
}

// 生成不同断点的列类
@for $i from 1 through $grid-cols {
  // 移动端
  @media (max-width: 768px) {
    .col-mob-#{$i} { 
      flex-basis: calc(100% / #{$grid-cols} * #{$i});
      flex-shrink: 1; // 空间不足时自动收缩
    }
  }

  // 平板端
  @media (min-width: 769px) and (max-width: 1023px) {
    .col-tab-#{$i} { 
      flex-basis: calc(100% / #{$grid-cols} * #{$i});
      flex-shrink: 1;
    }
  }

  // 桌面端
  @media (min-width: 1024px) and (max-width: 1407px) {
    .col-hd-#{$i} { 
      flex-basis: calc(100% / #{$grid-cols} * #{$i});
      flex-shrink: 1;
    }
  }

  // 大屏桌面端
  @media (min-width: 1408px) {
    .col-fhd-#{$i} { 
      flex-basis: calc(100% / #{$grid-cols} * #{$i});
      flex-shrink: 1;
    }
  }
}

这里因为用了gap，所以不需要在calc()里减去间距了，浏览器会自动处理列之间的空隙，不会出现换行问题。

内容的提问来源于stack exchange，提问作者marcos souza