CSS Flexbox使用gap属性导致列宽过宽 3列布局问题求解

<div class="row projects--wrapper">
  <div class="card-project--card col-4-12">
    <div class="card-project--image"><img src="/images/bgpic1.jpg" alt="text"></div>
  </div>
  <div class="card-project--card col-4-12">
    <div class="card-project--image"><img src="/images/bgpic1.jpg" alt="text"></div>
  </div>
  <div class="card-project--card col-4-12">
    <div class="card-project--image"><img src="/images/bgpic1.jpg" alt="text"></div>
  </div>
  <div class="card-project--card col-4-12">
    <div class="card-project--image"><img src="/images/bgpic1.jpg" alt="text"></div>
  </div>
  <div class="card-project--card col-4-12">
    <div class="card-project--image"><img src="/images/bgpic1.jpg" alt="text"></div>
  </div>
  <div class="card-project--card col-4-12">
    <div class="card-project--image"><img src="/images/bgpic1.jpg" alt="text"></div>
  </div>
</div>

列宽超出预期本质是Flexbox的尺寸计算规则和普遍认知有偏差：

• 给flex子项设置flex: 0 1 33.33%时，这个33.33%的基础宽度是直接按父容器的内容宽度计算的
• gap属性设置的间距是额外追加在子项之间的空隙，不会自动从你设置的百分比宽度里抵扣

3列布局横向共有2个间距，搭配gap: 2rem时，子项总宽度为3*33.33% + 2*2rem ≈ 100%父宽 + 4rem，自然会超出容器宽度，无法实现预期的3列排布。

注意：这是Flex布局的固有计算逻辑，不是浏览器实现bug。Grid布局的gap会自动纳入剩余空间分配计算，和Flex的gap计算逻辑存在明显差异。

方案1：用calc()精确计算子项宽度（Flex布局适配） #

手动把gap占用的宽度从总宽度里扣除，平均分配给每个子项，直接修改子项的flex属性即可：

/* 全局盒模型重置，避免padding/border额外撑宽元素 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.projects--wrapper {
  display: flex;
  flex-wrap: wrap; /* 必须配置，超出宽度时自动换行 */
  gap: 2rem;
}

.col-4-12 {
  /* 总宽度减去2个gap的总长度，剩余宽度等分成3份，就是每个子项的精确宽度 */
  flex: 0 0 calc((100% - 2 * 2rem) / 3);
}

这个方案兼容所有支持gap属性的浏览器，不需要改动原有布局逻辑，只需要根据列数调整calc()里的gap乘数即可：N列布局的横向gap总数是N-1个，代入公式calc((100% - (N-1)*gap值)/N)就能算出对应子项宽度。

方案2：改用Grid布局实现（最简便，推荐） #

多列等分布局用Grid实现逻辑更简单，不需要手动计算宽度，gap会自动被纳入列宽计算，不会出现溢出问题：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.projects--wrapper {
  display: grid;
  /* 直接定义3列等宽，gap自动适配 */
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* 子项不需要额外设置宽度，默认会自动填满网格单元格 */

如果不需要兼容特别老旧的浏览器（比如IE11），这个方案是最优选择，代码量最少，后续调整列数、间距都不需要重新计算宽度，维护成本极低。

不要依赖flex-shrink的自动收缩适配gap：部分浏览器在子项存在内容、内边距时，收缩计算会有精度误差，很容易出现最后一行/最后一列错位、宽度不一致的问题，用固定计算值或者Grid可以100%规避这类问题。

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