真正可控的方式是结合calc()和CSS自定义属性（--cols）计算单列基础宽度并设为flex-basis，同时必须添加min-width: 0防止内容溢出导致失效。
Flex栅格怎么让列数动态可配，又不写死flex-basis
直接用flex: 1或flex: 0 1 auto撑不满容器，尤其在子项内容高度不一时，列宽会“打架”。真正可控的方式是结合calc()和CSS自定义属性（--cols）算出单列基础宽度，再用flex-basis固定——但必须配合min-width: 0防溢出，否则文字长的项会强行撑宽整列。
- 定义
--cols: 3后，子项设flex-basis: calc(100% / var(--cols)); - 务必加
min-width: 0，否则flex-basis在内容超长时失效 - 别用
width替代flex-basis，它绕过Flex收缩逻辑，响应式会崩
间距（gap）和padding混用导致布局错位怎么办
gap是Flex容器级属性，干净利落；但一旦容器有padding，又子项自己加margin，就会双重留白、对不齐。更麻烦的是，IE完全不支持gap，如果项目还要兼容，得用margin模拟，但必须用负边距抵消父容器padding。
- 现代方案：只用
gap: 1rem，删掉所有子项margin和容器padding - 兼容IE：用
margin-right/margin-bottom+ 容器margin: -0.5rem抵消 - 注意
gap不触发重排，margin会，高频操作时性能有差异
列数随屏幕变化却出现最后一行缺项的bug
这是flex-wrap: wrap的典型问题：当子项总数不能被当前--cols整除，最后一行剩余项仍按flex-basis占位，但视觉上空缺明显。根本原因是没处理“剩余项自动拉满”逻辑。
- 用
:nth-child(n):nth-last-child(-n+选中末尾项，单独设计算值)flex: 1 - 更稳的做法：用
justify-content: space-between替代flex-start，靠齐后留白均分 - 别依赖
display: grid回退——Grid的grid-template-columns和Flex列数变量不同步，维护两套逻辑反而易错
移动端小屏下--cols切得太急，文字挤成一团
列数不是越小越好。比如从--cols: 4直接跳到--cols: 1，中间缺少过渡，卡片内文字没空间换行，字号又没响应式缩放，结果就是文字溢出或强制折行难看。
立即学习“前端免费学习笔记（深入）”；
- 在
@media里分段设--cols：max-width: 768px→--cols: 2，max-width: 480px→--cols: 1 - 配合
font-size: clamp(0.875rem, 4vw, 1rem)，避免小屏字太大撑破列宽 - 测试真机：iOS Safari对
calc(100% / var(--cols))的解析偶尔有像素级误差，建议加max-width: calc(... - 1px)兜底
列数和间距看着是样式问题，实际卡点都在Flex的收缩优先级、浏览器对calc的精度处理、以及gap与传统盒模型的互斥逻辑上——调的时候盯着DevTools里每个子项的computed flex-basis和width，比看设计稿还管用。
