flex-wrap: wrap 仅依据剩余空间决定换行，不按数量分组；grid-auto-flow: row 按源序填行但不保证每行数量一致；二者根本差异在于Flex是一维线性延伸，Grid是二维轨道布局。
flex-wrap: wrap 为什么有时不换行
常见现象是子元素宽度总和没超容器，但你期望它们“每行最多3个”——flex-wrap: wrap 不管数量，只看剩余空间够不够放下下一个元素。它不会主动截断，也不会强制按数量分组。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保父容器有明确的
width或max-width，否则 flex 容器可能无限宽，所有子项都挤在一行 - 子元素别设
flex-shrink: 0且没给min-width，否则它们会强行压缩自身导致换行失效 - 用
flex-basis替代固定width，比如flex: 1 1 calc(33.333% - 8px)，配合gap控制间距更可靠
grid auto-flow: row 是怎么“自动”的
grid-auto-flow: row 的“自动”指：按源顺序把子元素逐个塞进当前行，填满后才开新行；但它不保证每行数量一致——如果某项跨列或尺寸异常，后续排列就会偏移。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 搭配
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))))才真正实现“根据容器宽度自动计算每行几个” - 避免混用
grid-column-start等显式定位，否则会干扰auto-flow的自然填充逻辑 -
auto-fill和auto-fit行为不同：auto-fit会合并空轨道，更适合响应式卡片流
/* 推荐的 Grid 多行自适应写法 */
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))));
gap: 12px;
grid-auto-flow: row;
}flex-wrap 与 grid 在换行逻辑上的根本差异
Flex 是一维布局模型，换行只是“换行轴方向的延伸”，主轴方向仍保持线性顺序；Grid 是二维模型，换行本质是“开辟新行轨道”，可以独立控制行列对齐、间距、甚至跨行跨列。
这意味着：
- 需要对齐首尾项（比如最后一行左对齐，而非默认拉伸）时，
justify-content: flex-start对 flex 有效，但 grid 要靠justify-items或place-items - 要让某一项占满整行，flex 得用
margin: auto或额外 wrapper；grid 只需grid-column: 1 / -1 - 动态增删子元素时，flex 的重排开销略小；grid 在复杂响应规则下更稳定，尤其涉及
minmax()和fit-content()
移动端适配中容易被忽略的 gap 兼容性
gap 在 flex 布局中直到 Safari 14.1 才完全支持，在 iOS 14.0 及更早版本里会失效；而 grid 中的 gap 支持从 Safari 10.1 就开始，更稳妥。
所以如果你必须支持旧版 iOS：
- 用 grid 实现多行 +
gap，比 flex 更可靠 - 若坚持用 flex，得降级为
margin模拟 gap，并用:nth-child清除末尾项的多余 margin - 检查是否启用了
display: flex的 autoprefixer 输出，某些旧配置会漏掉-webkit-前缀（虽然现代已基本不用）
真正决定换行行为的不是“用了 wrap 还是 auto-flow”，而是你有没有控制好轨道尺寸、内容固有宽高、以及浏览器对 gap 和 minmax 的实际解析能力。
