如何动态计算包含gap值的flexbox子项宽度避免元素换行

问题核心原因 #

你现在的栅格宽度计算没有把flex布局的gap间距纳入总宽度统计：一行3个col-4总宽度已经占满100%，额外增加的2个1em gap会让整行总宽度超过父容器100%，自然会触发换行。

具体修复方案 #

步骤1：统一将gap定义为Sass全局变量 #

先把栅格间距抽成变量，方便后续计算和全局修改：

$grid_columns: 12; // 你原有12列配置
$grid-gap: 1em; // 统一栅格间距变量
$modifier: ''; // 响应式前缀如-sm/-md可按需配置

步骤2：修改列宽计算公式，用calc纳入gap宽度 #

一行满12列的情况下总共有12 - 1 = 11个gap，总可用宽度为100% - 11 * $grid-gap，基于这个基数计算每列宽度即可：

@for $i from 1 through $grid_columns{
  .col#{$modifier}-#{$i}{
    // 核心修改：计算宽度时扣除对应gap占比
    flex: 0 0 calc( (100% - #{($grid_columns - 1) * $grid-gap}) / #{$grid_columns} * #{$i} );
    box-sizing: border-box; // 确保padding、边框不会额外撑宽元素
  }
}

步骤3：替换row中的gap为变量 #

.row{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: $grid-gap;
  box-sizing: border-box;
}

.container{
  max-width: $grid_bp-md *1px;
  margin: 0 auto;

  &-fluid{
    max-width: 100%;
    margin: 0;
  }
}

兼容备选方案（适配不支持gap的旧浏览器） #

如果需要兼容低版本浏览器，可以用Bootstrap传统的负margin+padding方案替代gap，不需要修改列宽计算：

.row{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 calc(#{$grid-gap} / -2); // 左右负margin抵消列的左右padding
  box-sizing: border-box;
}

@for $i from 1 through $grid_columns{
  .col#{$modifier}-#{$i}{
    flex: 0 0 100%/$grid_columns * $i;
    padding: 0 calc(#{$grid-gap} / 2); // 左右padding模拟gap效果
    box-sizing: border-box;
  }
}

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