flex-wrap 应固定为 wrap，通过子项 flex-basis 和 min-width 控制换行；在媒体查询中切换 nowrap/wrap 易致溢出、与 flex-shrink 冲突，且 safari 对 wrap-reverse 支持差。
flex-wrap 不该在 media query 里反复切换，而应固定设为 wrap，靠子项的 flex-basis 和 min-width 控制换行时机。
为什么 flex-wrap 不要在媒体查询里切 nowrap/wrap
强行在断点中改 flex-wrap: nowrap，常导致内容溢出容器，尤其当子项有固定 width 或 flex-basis 时。更隐蔽的问题是：它会和 flex-shrink 行为冲突，出现“部分换行、部分卡住”的错乱网格。
- 常见错误现象：
max-width: 480px下加了flex-wrap: nowrap，结果卡片横向挤出屏幕右侧，滚动条意外出现 - 真正需要“不换行”的场景（如水平滚动列表），用
flex-direction: row+overflow-x: auto更可靠 - Safari 旧版本对
flex-wrap: wrap-reverse支持不稳定，若必须用，得补-webkit-flex-wrap
flex-basis 配合 calc() 控制列数的实操要点
列数变化本质是子项“争取宽度”的结果，不是靠父容器硬性规定。用 flex-basis 设基础尺寸，再用 calc() 扣除 gap，才能避免因四舍五入或边距误差导致的临界卡顿。
- 别写
flex-basis: 25%—— 百分比基于容器总宽，但gap或margin占用空间后，实际可用宽度变小，容易卡在“差 1px 就换行”的状态 - 推荐写法：
flex: 0 0 calc(25% - 16px)（对应gap: 16px），flex: 0 0锁定不伸缩，只靠换行响应 - 移动端优先可反向设计：
flex: 0 0 100%（手机）→flex: 0 0 calc(50% - 16px)（平板）→flex: 0 0 calc(33.333% - 16px)（桌面）
换行失效？先检查这三处
写了 flex-wrap: wrap 还不换行，大概率不是 CSS 没生效，而是子项“拒绝收缩”。
-
flex-shrink: 0被显式设置，或通过flex: 1 0 auto等缩写隐含锁定 -
min-width设得过大（比如min-width: 320px），而容器宽度已低于 640px，两列都放不下 - 用了
width覆盖了flex-basis，且width是固定值（如width: 300px），flex 失去弹性控制权
用 min-width 触发换行比媒体查询更轻量
如果只是想让网格“自然响应”，不用每个断点都写 @media。直接给子项设 min-width + flex: 1 1 0，浏览器会自动计算最多能塞几列。
- 示例：
.item { min-width: 280px; flex: 1 1 0; }→ 容器宽 - 优势：无需预设断点，适配折叠屏、分屏窗口等非标准尺寸
- 注意：需确保父容器有明确宽度（如
max-width或width），否则min-width计算无基准
最易被忽略的点是：很多人把 flex-wrap 当成“开关”，其实它只是“允许换行”的前提；真正决定何时换、怎么换的，是子项的收缩能力与最小尺寸约束。写 media query 前，先确认子项有没有被 flex-shrink: 0 或过大的 min-width 卡死。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
