flex-wrap: wrap 生效需同时满足容器宽度受限、子项设 min-width 或 flex-basis；推荐用 minmax() + repeat(auto-fit, ...) 替代 calc()，IE11 需降级为媒体查询或 inline-block。
flex-wrap 怎么让商品卡片自动换行
关键不是“让它换行”，而是控制容器宽度和子项最小宽度，flex-wrap: wrap 才会真正生效。很多人写了 flex-wrap: wrap 却没效果，是因为父容器太宽、子项又没设 flex-basis 或 min-width，导致所有卡片被强行挤在一行。
实操建议：
- 给商品卡片设
flex: 0 0 calc(25% - 1rem)（对应 4 列），同时加min-width: 280px防止在小屏下缩得太窄 - 父容器必须有明确宽度限制，比如
max-width: 1200px，否则在大屏下仍可能单行撑满 -
gap比margin更可靠——它不参与 flex 计算，不会干扰calc()的列数逻辑
calc() 算列数时为什么总差一列
因为 calc() 里用了百分比 + 固定值，但没考虑 gap 占用的空间。比如写 flex-basis: calc(33.333% - 1rem) 假设三列，实际四列时 gap 多出一份，总宽度就超了容器，最后一列被迫掉到下一行。
常见错误现象：flex-wrap 生效了，但最后一列永远孤零零卡在第二行开头，像被截断。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 列数推导优先用
minmax()+repeat(auto-fit, ...)替代纯calc()，更健壮 - 如果坚持用
calc()，固定列数场景下，把 gap 拆进计算：比如 4 列 + 1rem gap，则每项宽度应为calc((100% - 3rem) / 4) - 别用
33.333%这种近似值，浏览器渲染误差会累积；改用100% / 3（现代浏览器支持）或直接33.333333%保留 6 位小数
小屏下商品墙错位或溢出怎么办
错位往往不是 CSS 写错了，是图片或文字高度不一致导致 flex 项目基线对齐异常；溢出则多因图片未约束宽高，或字体尺寸随 viewport 变化失控。
使用场景：移动端横屏/竖屏切换、折叠屏设备、Zoom 缩放后重新渲染。
实操建议：
- 给商品卡片加
align-items: flex-start，避免默认的stretch拉伸不同内容高度 - 图片统一用
aspect-ratio: 1 / 1+object-fit: cover，禁用height: auto这类不可控属性 - 字体大小改用
clamp(0.875rem, 4vw, 1rem)，而不是单纯rem或em
IE11 兼容 flex-wrap + calc() 的底线方案
IE11 支持 flex-wrap，但不支持 calc() 在 flex-basis 中使用（会直接忽略整条声明）。很多团队以为加个前缀就完事，结果线上全是单列瀑布流。
性能影响：用媒体查询替代 calc() 虽冗余，但 IE11 下更稳定；JS 动态计算列数则引入额外重排风险。
实操建议：
- 对 IE11 单独写媒体查询：
@media screen and (max-width: 768px) { .grid-item { flex-basis: 50%; } } - 放弃在 IE11 中“精确列数”，改用
display: inline-block+vertical-align: top保底，配合box-sizing: border-box - 如果必须用 flex，IE11 下把
flex-basis改成固定像素值（如280px），靠flex-wrap自动折行
最易被忽略的是 gap 和 padding 对 calc 结果的隐性影响——它们不参与 flex 分配，但占真实空间。调样式时盯着 devtools 的 layout 面板看“实际占用宽度”，比反复改 calc() 表达式更省时间。
