SCSS实现类Bootstrap的Flex栅格系统时列无法对齐问题排查

• 父元素.row配置错误：设置了justify-content: center会让列整体居中排列而非贴边对齐，同时加在父元素上的flex-basis: 0完全无效，该属性仅作用于flex子元素
• 固定宽列属性不全：.col-*仅设置了width，但flex子元素默认flex-shrink: 1，空间不足时会自动挤压收缩，导致宽度不符合预设比例
• 自动填充列配置错误：.col仅设置flex-grow:1，默认flex-basis: auto会优先按内容宽度分配空间，无法做到等分剩余空间
• 未处理column-gap的空间占用：百分比宽度计算没有扣除gap的宽度，多列总宽度超出行容器100%时会触发换行或者挤压

1. 调整row容器样式 #

删除无效属性，修改对齐规则：

.row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start; // 改为左对齐，保证列从左到右贴边排列
  column-gap: .5rem;
  box-sizing: border-box;

  &.nogap {
    column-gap: 0;
  }
}

2. 统一列的基础属性 #

给所有列统一盒模型，补充flex属性规则：

// 新增通用列基础配置
.col, [class*="col-"] {
  box-sizing: border-box;
}

$base: 12;

.col {
  flex: 1 1 0; // 允许放大、允许收缩、基础宽度为0，保证等分剩余空间
}

@for $i from 1 through $base {
  .col-#{$i} {
    // 不放大、不收缩，基础宽度为对应百分比，固定宽度不受内容影响
    flex: 0 0 percentage($i/$base);
    // 如果保留column-gap配置，需要用calc扣除gap占比，单gap对应每列分一半：
    // flex: 0 0 calc(#{percentage($i/$base)} - #{$i / $base * .5rem});
  }
}

3. 可选优化：改用Bootstrap式gutter方案（兼容性更好） #

如果不想处理gap带来的百分比计算问题，可以删除column-gap配置，改用负margin+padding实现间距：

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -.25rem;
  margin-right: -.25rem;
}
.col, [class*="col-"] {
  padding-left: .25rem;
  padding-right: .25rem;
}

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