flex-wrap未生效主因是父容器缺明确宽度或子项收缩约束过强，需设width/max-width、min-width:0，并配合flex-basis与calc控制换行位置。
小屏幕下 flex 元素不换行，flex-wrap: wrap 没生效？
多数情况不是 flex-wrap 写错了，而是父容器没给明确宽度，或子项设置了过强的收缩/拉伸约束。Flex 默认会尝试把所有子项挤进一行，哪怕内容溢出也不自动换行——尤其在移动端 viewport 缩小后，flex-basis 和 min-width 的隐式值会起主导作用。
常见表现：flex-direction: row 下，三个按钮在 iPhone 上横向溢出、滚动条出现，但预期是竖排或两行排列。
- 检查父容器是否设置了
width: 100%或max-width，否则 flex 容器可能按内容宽度计算，导致换行阈值远超视口 - 子项默认有
min-width: auto（Chrome/Firefox），会阻止压缩到小于内容宽度，可显式设为min-width: 0 - 避免对子项同时设置
flex: 1和固定width，二者冲突时浏览器行为不一致
@media 中只改 flex-wrap 不够，还得调 flex-basis
单纯在媒体查询里加 flex-wrap: wrap，往往换行位置不合理：比如四列网格在 480px 下变成“三行一列”，而不是更均匀的“两行两列”。关键在于控制每项的基础尺寸。
推荐组合写法：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 480px) {
.grid-row {
flex-wrap: wrap;
}
.grid-item {
flex-basis: calc(50% - 8px); /* 两列，留间隙 */
margin: 4px;
}
}-
flex-basis比width更可靠，它直接参与 flex 计算主轴空间分配 - 用
calc()配合margin而非gap，兼容性更好（gap在 flex 容器中 iOS Safari 14.5+ 才稳定支持） - 若子项含图片或文本，加
min-width: 0防止内容撑开导致换行失效
iOS Safari 中 flex-wrap 偶发失效的隐藏原因
真机调试时发现：同一段 CSS，在 Chrome 模拟器里换行正常，Safari 却死活不换——大概率是 viewport 设置或字体渲染触发了 flex 容器的“最小内联尺寸”逻辑。
- 确保
存在且无拼写错误 - 避免子项使用
white-space: nowrap，它会锁死单行，覆盖flex-wrap - 某些 WebKit 版本对
flex: 0 1 auto解析异常，显式写成flex: 0 1 fit-content或降级为flex: 0 1 100% - 临时验证方式：在 Safari 开发者工具中手动勾选/取消
flex-wrap，看是否立即响应；不响应说明被其他规则层叠覆盖
用 display: grid 替代 flex 做响应式布局更可控？
当换行逻辑变得复杂（如“小屏 1 列 → 中屏 2 列 → 大屏 4 列”），硬靠 flex-wrap + 多组 media query 维护成本高，且难以精准控制行数与对齐。此时 display: grid 的 auto-fit + minmax() 是更简洁的选择。
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 12px;
}但要注意：如果项目需支持 IE11 或旧版 Android WebView，仍得退回 flex 方案，并补全 -webkit- 前缀及 fallback。
真正棘手的从来不是要不要换行，而是换行后第一行高度是否被最后一行内容顶高、是否有未预料的基线对齐偏移——这些细节在 flex 中比 grid 更难调试。
