flex列数本质是flex-wrap自动换行行为，由子项min-width与容器宽度共同决定；需配合css变量、calc()和媒体查询动态控制min-width，而非直接用变量设列数。
纯 CSS 变量无法让 Flex 自动算出列数，但可以配合 calc() 和 min-width 实现可控的动态列数切换——关键不在“变量驱动列数”，而在“变量驱动子项最小宽度，由 flex-wrap 自动折行”。
Flex 列数本质是换行行为，不是 CSS 属性
Flex 没有 columns 这类属性。所谓“3 列”，其实是子项在容器内排满三份后触发换行。决定列数的，是每个子项的 min-width（或 flex-basis + min-width 组合），不是父容器声明。
-
flex-wrap: nowrap→ 强行挤一行，超宽就溢出 -
flex-wrap: wrap→ 子项总宽超容器时自动折行，列数由min-width与容器宽度共同决定 - 只设
flex-basis不够：内容短时会被压缩，列数可能意外增加；必须加min-width才能守住底线
用 CSS 变量控制子项最小宽度
把列宽逻辑交给变量，再用 calc() 算出基础值，是最稳妥的写法。变量本身不参与布局计算，但它能被 calc() 读取并转为有效数值。
- 定义变量：
:root { --col-min-width: 280px; } - 子项样式：
min-width: var(--col-min-width); flex: 1 1 0; - 别写
width: var(--col-min-width)：它绕过 Flex 收缩逻辑，响应式下易崩 - 移动端真机测试时，iOS Safari 对
calc(100% / var(--cols))有像素级误差，建议加max-width: calc(var(--col-min-width) - 1px)兜底
响应式列数切换要靠媒体查询改变量值
不能指望变量自己“感知”屏幕尺寸。必须用媒体查询显式重设变量，再让子项样式响应变化。
- 桌面端：
@media (min-width: 1024px) { :root { --col-min-width: 320px; } } - 平板端：
@media (max-width: 1023px) { :root { --col-min-width: 260px; } } - 手机端：
@media (max-width: 767px) { :root { --col-min-width: 100%; } }（此时单列） - 注意 gap 和 box-sizing 必须统一：
gap: 1rem要从容器宽度里减掉，否则列数会少一列
别踩这些坑
实际调的时候，最常卡住的地方不在语法，而在浏览器对 calc() 的解析精度、Flex 收缩优先级，以及 gap 与传统 margin/padding 的互斥逻辑。
-
var(--cols)不能直接用于flex-basis：写成flex-basis: var(--cols)无效，必须走calc()或绑定到min-width - IE11 完全不支持 CSS 变量，如需兼容，得用 JS 注入内联样式或 fallback 值：
min-width: 280px; min-width: var(--col-min-width); - 最后一行缺项？那是
flex-wrap的正常表现。别用justify-content: space-between强撑，容易导致间距错乱；更稳的是用:nth-child()选中末尾项单独设flex: 1
真正难调的不是怎么写，而是怎么让不同浏览器在各种缩放、字体渲染、viewport 设置下都保持列数稳定——这需要盯着 DevTools 里每个子项的 computed width 和 flex basis 实时变化来微调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
