必须给容器设明确宽度，CSS变量本身不触发换行，flex-wrap: wrap或grid-template-columns: repeat(auto-fit, ...)才是换行开关；变量仅是占位符，需配合width、minmax()等布局属性及父容器尺寸限制才能生效。
必须给容器设明确宽度，CSS变量本身不触发换行，只参与计算；flex-wrap: wrap 或 grid-template-columns: repeat(auto-fit, ...) 才是换行的真正开关。
为什么只定义 CSS 变量没用？
CSS 变量（如 --col-width: 250px）只是值的占位符，不会自动影响布局行为。浏览器不会因为声明了变量就让元素换行——它得被用在某个具有布局语义的属性里，比如 width、minmax() 或 flex-basis。常见错误是只写 :root { --gap: 16px; } 却没在容器上应用 gap 或 width。
用 var() 配合 flex-wrap: wrap 实现可调宽度换行
这是最常用也最可控的方式：变量控制子项最小宽度，父容器开启换行，由 Flex 自动分配剩余空间。
- 父容器必须有明确宽度（
width或max-width），否则换行不可见 - 子项用
flex: 1 1 var(--col-width)，其中--col-width是最小基准宽度 - 避免对子项设固定
width，否则会破坏弹性伸缩
.container {
display: flex;
flex-wrap: wrap;
gap: var(--gap, 12px);
max-width: 1200px;
}
.card {
flex: 1 1 var(--col-width, 280px);
min-width: var(--col-width, 280px);
}
用 var() 驱动 Grid 的 auto-fit 换行
Grid 方案更适配“列数自适应”场景，变量直接注入 minmax()，无需手动算断点。
立即学习“前端免费学习笔记（深入）”；
-
minmax(min(var(--min-col, 250px), 100%), 1fr)确保单列不超容器宽 - 必须用
auto-fit（不是auto-fill），才能在空列时收缩 - 旧版 Safari 对
gap支持弱，建议用margin+var(--gap)回退
.grid-container {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(min(var(--min-col, 250px), 100%), 1fr))
);
gap: var(--gap, 16px);
}
容易忽略的兼容性与调试点
变量生效不等于换行生效。以下三点常被跳过：
- 检查父容器是否真的受限：用 DevTools 看 computed
width，不是看声明值 -
flex-wrap: wrap写成flex-wrap: wrap-reverse会导致换行方向反向，视觉上像“没换行” - Grid 中若子项含
width: 100%，可能撑爆列宽，应优先用min-width和flex控制
变量只是工具，换行逻辑始终由布局模型（Flex/Grid）和容器尺寸共同决定。别指望一个 var() 调用就能绕过这两层约束。
