如何在Sass中通过@for规则基于列尺寸添加max-width？

要实现基于列尺寸的max-width，只需在.col-#{$i}的规则内添加与flex-basis（即flex: 0 0后的数值）完全一致的max-width属性即可。这能确保列的宽度不会因内部内容过多被撑开，严格遵循预设的列比例。

完整的SCSS代码如下：

$columns: 12;

@for $i from 1 through $columns {
  .col-#{$i} {
    flex: 0 0 100% / $columns * $i;
    max-width: 100% / $columns * $i; // 添加的max-width，与flex基准宽度匹配
  }
  .col-offset-#{$i} {
    margin-left: 100% / $columns * $i;
  }
}

补充说明 #

虽然flex: 0 0 [width]已经设置了固定基准宽度，同时禁止了元素的收缩与拉伸，但当列内包含超出预期宽度的内容（比如长文本、大图片）时，部分浏览器可能出现列被撑开的情况。添加与基准宽度一致的max-width可以彻底避免这种问题，保证Flex布局的稳定性。

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