flex-wrap: wrap在移动端“不换行”的根本原因是默认nowrap、父容器缺宽度上下文、white-space: nowrap抑制折行、框架重置或flex-shrink: 1导致子项被压缩；配合flex-shrink: 0、min-width、align-items: flex-start和gap可实现可靠流式换行。
直接用 display: flex + flex-wrap: wrap + align-items: flex-start，子元素设 flex-shrink: 0 和 min-width，别碰 width: 100% 或 white-space: nowrap —— 这是目前唯一能兼顾流式、换行可控、移动端不溢出的组合。
为什么 flex-wrap: wrap 在移动端经常“不换行”
根本原因不是属性没生效，而是它被默认值或隐式规则压制了：
-
flex-wrap默认就是nowrap，只写display: flex等于主动关掉换行 - 父容器没明确宽度上下文（比如漏了
width: 100%或max-width），Flex 容器会无限撑宽，子项永远“够得着” - 子标签用了
white-space: nowrap（常见于带图标或短横线的词如"React-Router"），内部文字不折行 → 标签整体变宽 → 挤占换行空间 - 某些 CSS 框架或全局 reset 会把
flex-wrap强制重置为nowrap，得在开发者工具里检查 computed 值
flex-shrink: 0 是防崩关键，不是可选项
移动端屏幕窄，浏览器默认会让 Flex 子项收缩（flex-shrink: 1）来保单行，结果就是文字被压缩、图标错位、甚至 text-overflow: ellipsis 都来不及触发。加 flex-shrink: 0 才真正守住每个标签的“内容宽度”底线：
- 它让标签按文字自然撑开，不被压扁，也不强制拉伸
- 配合
min-width: calc(1rem + 12px)（比固定像素更弹性），小屏下自动减少每行数量，而非牺牲可读性 - 若同时用了
gap，flex-shrink: 0还能防止最后一行末尾多出空白间隙（margin方案里常要靠:last-child清除，这里不用）
gap 和 margin 别混用，尤其在移动端
Tailwind 用户最容易踩这个坑：一边写 gap-2，一边又给每个标签加 mb-2 mr-2，结果间距翻倍、换行后首尾不对齐：
-
gap是容器级控制，浏览器自动处理换行间隙，无需关心首尾 -
margin是子项级控制，最后一行末尾标签仍有mr-2，但下一行第一个标签没有ml-2，视觉上就偏了 - Safari 14.1 之前不支持
gap在 Flex 容器中，真要兼容 IE11 或老 Safari，才用margin降级，并务必加:last-child { margin-right: 0; } - 移动端尤其注意：别用
gap-y—— Flex 布局根本不认它，写了也白写
align-items: flex-start 不是“美化”，是解决对齐错乱的刚需
默认 align-items: stretch 会让同一行所有标签拉伸到最高项的高度。一旦某标签含图标、两行文字或不同 line-height，整行就“浮空”了，顶部参差不齐：
-
align-items: flex-start让所有标签按自身内容高度排列，顶部自然对齐，符合阅读习惯 -
vertical-align在 Flex 布局中完全无效，别浪费时间调 - 如果标签里用了图标字体（如 Font Awesome），确保图标和文字的
line-height和font-size一致，否则基线偏移仍会发生 - 别用
margin-top往上调位置——优先用padding或align-self: flex-start（仅作用于单个标签）
最易被忽略的一点：容器自身的 padding。因为 gap 不作用于容器边缘，如果父容器没留内边距，标签会紧贴边界，看起来像“挤在一起”，其实只是视觉误差。加个 padding: 0.5rem 就立刻清爽。另外，别指望媒体查询硬控“每行几个”，靠 min-width + 容器宽度让浏览器自动算，才是真响应式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
