flex-wrap: wrap 在移动端常失效是因父容器缺明确宽度或子项未设 flex-shrink: 1，导致不换行；实现等宽响应式列应设父容器 display: flex + flex-wrap: wrap，子项 flex: 1 1 0 + min-width。
flex-wrap: wrap 在移动端栅格中为什么常失效？
不是 flex-wrap: wrap 本身有问题，而是父容器没给明确宽度或子项没设收缩规则，导致浏览器认为“不用换行也能塞下”。尤其在移动端，viewport 宽度变化频繁，flex-shrink: 1 缺失时，子项会强行撑宽容器，换行被跳过。
- 必须给父容器设置
width: 100%或max-width（不能只靠display: flex） - 子项推荐加
flex: 0 1 auto或至少flex-shrink: 1，否则 iOS Safari 会忽略换行 - 避免对子项设固定
width（如width: 300px），它会覆盖 flex 计算逻辑
如何用 flex-wrap 实现等宽响应式列（比如 2 列 → 1 列）
关键不在 media query，而在子项的 flex-basis 动态计算。直接写死 50% 在小屏下容易溢出，要用 min-width + flex-basis: 0 触发自动分配。
- 父容器：
display: flex+flex-wrap: wrap - 子项：
flex: 1 1 0+min-width: 320px（数值按设计稿最小列宽定） - 这样在宽度
- 注意：Chrome 115+ 对
flex-basis: 0的处理更严格，务必配min-width，否则可能塌缩成一条线
iOS Safari 下 flex-wrap 换行错位的典型表现和修复
常见现象是最后一行子项右偏、间隙不均，甚至某一项被挤到下一行但留出大片空白。本质是 Safari 对 box-sizing 和 gap 的解析差异，尤其当子项含 padding 或 border 时。
- 父容器统一加
box-sizing: border-box - 禁用
gap，改用margin控制间距（gap在 iOS 15.4 以下不支持 flex-wrap 换行后的对齐） - 子项若含
padding，需确保flex-basis已扣除 padding（例如设flex-basis: calc(50% - 12px)） - 测试真机时重点看 iPhone SE（3rd）这类窄屏设备，模拟器有时不复现
要不要用 CSS Grid 替代 flex-wrap 做响应式栅格？
可以，但别盲目替换。Grid 确实原生支持行列响应（grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))），但老版本 Android WebView（≤ 4.4）和部分邮件客户端完全不支持；而 flex-wrap 兼容到 Android 4.0+，且调试更直观。
- 如果项目需支持微信内置浏览器（X5 内核）、钉钉旧版，优先用 flex-wrap
- 如果只跑现代 PWA 或独立 App 内嵌页，Grid 更简洁，
grid-auto-flow: dense还能填空 - 混合方案也常见：用 Grid 布局大结构，内部卡片列表仍用 flex-wrap，兼顾兼容与语义
flex-wrap 的坑多数藏在细节里：min-width 单位用 px 还是 rem、flex-shrink 在不同 Safari 版本的行为差异、甚至父容器是否设置了 overflow: hidden——这些都会让换行结果偏离预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
