<p>用 CSS 自定义属性 --col-count 控制列数，配合 calc(100% / var(--col-count)) 动态设置 flex-basis，结合 --space-* 统一管理间距，以及 --col-min-width 实现容器宽度驱动的流式列数切换，可提升响应式布局的可维护性与健壮性。</p>
用 --col-count 控制列数，避免重复写 flex 值
硬编码每列的 flex: 1 或 flex: 0 0 calc(100% / 3) 很容易出错，尤其当列数在不同断点变化时。用 CSS 自定义属性统一管理列数，再配合 calc() 动态算宽，能大幅减少冗余代码和计算失误。
关键点在于：自定义属性本身不能直接参与 calc() 运算（除非用 env() 或 JS 注入），但可以结合 var() + calc() 在支持的上下文中生效——比如现代浏览器中，flex-basis 支持 calc()，而 var() 可以作为中间变量被解析。
- 在根元素或容器上定义：
:root { --col-count: 3; } - 子项设置：
flex: 0 0 calc(100% / var(--col-count)); - 响应式切换时只需改一个值：
@media (max-width: 768px) { .container { --col-count: 1; } } - 注意：IE 不支持
var()，且 Safari 15.4 之前对calc()中嵌套var()的解析有 bug，建议加降级：flex-basis: 33.33%; flex-basis: calc(100% / var(--col-count));
gap 和 padding 都依赖同一组自定义间距变量
列间距、内边距、卡片 padding 如果各自写 16px、24px、1rem，后期调整会漏改。把常用间距抽成 --space-xs、--space-sm、--space-md，所有布局相关尺寸就联动了。
- 声明：
:root { --space-sm: 0.75rem; --space-md: 1.5rem; } - 用在 Flex 容器：
gap: var(--space-md); - 也用在子项：
padding: var(--space-sm); - 如果某列需要“贴边不留 gap”，可额外设
margin抵消，比如：margin: calc(-1 * var(--space-md));
用 --col-min-width 替代固定像素断点，实现真正流式列数切换
传统媒体查询靠屏幕宽度判断列数（如 @media (min-width: 900px)），但实际应取决于容器可用宽度。用 flex: 1 1 var(--col-min-width) 让每列“至少占这么宽”，再配合 flex-wrap: wrap，浏览器会自动决定一行放几列——这才是语义正确的响应式。
立即学习“前端免费学习笔记（深入）”；
- 设置：
.column { flex: 1 1 var(--col-min-width, 300px); }（带 fallback） - 容器加
gap后，要防止因 gap 累加导致换行提前，可微调：flex-basis: calc(var(--col-min-width, 300px) - 2px);（减去一半 gap） - 不推荐用
width替代flex-basis，否则会破坏 Flex 的伸缩行为 - 验证是否生效：缩小容器宽度，观察列是否自然从 3 列 → 2 列 → 1 列，而不是卡在某个断点不动
嵌套 Flex 容器里，自定义属性需显式继承或重定义
外层设了 --col-count: 2，不代表内层子容器自动拿到这个值。Flex 嵌套时，自定义属性不会跨容器穿透，必须手动传递或重定义。
- 方案一（推荐）：在嵌套容器上重新声明，例如侧边栏里的列表：
.sidebar-list { --col-count: 1; } - 方案二：用
inherit显式继承（仅限直系父容器）：.inner-container { --col-count: inherit; } - 方案三：用 JS 动态注入（适合运行时列数不确定的场景），但会增加复杂度，一般没必要
- 容易忽略的坑：嵌套后
gap值可能被外层容器的gap影响叠加，建议嵌套容器单独设gap，不要依赖继承
真正省事的不是多写几个 var()，而是让每个自定义属性都对应一个可解释、可预期、可独立测试的行为边界。比如 --col-min-width 永远只控制最小列宽，不掺杂 margin 或 gap；--col-count 只用于计算比例，不用于控制是否换行——职责分清了，后面才不容易改崩。
