flex-wrap: wrap 必须与 display: flex 同时使用才生效；默认 nowrap，子项超宽也不会折行；移动端失效常因漏写 display: flex 或父容器无宽度、子项 flex-shrink: 0、未设 viewport 和 box-sizing。
flex-wrap: wrap 必须和 display: flex 同时出现才生效
只写 flex-wrap: wrap 不会触发换行，这是最常被忽略的前提。Flex 容器默认是 flex-wrap: nowrap，哪怕子项总宽远超屏幕，浏览器也只会压缩或溢出，绝不会自动折行。
移动端标签栏失效的首要原因，就是只加了 flex-wrap 却漏掉 display: flex。尤其用 Tailwind 时，flex 类默认不带 flex-wrap，得显式加 flex-wrap 或 flex-wrap-wrap 才行。
- 正确写法：
display: flex; flex-wrap: wrap; - 错误写法：
flex-wrap: wrap;（无display: flex）或display: flex;（无flex-wrap） - 移动端还要确认父容器有明确宽度：至少写
width: 100%，否则容器按内容撑开，wrap形同虚设
子项必须允许收缩，否则换行逻辑被绕过
写了 flex-wrap: wrap 还是一行堆到底？大概率是子项锁死了宽度。比如用了 flex: 0 0 auto、flex: none 或固定 width，浏览器判定“每个标签都必须占满自己想要的宽度”，宁可横向滚动也不换行。
标签栏场景下，推荐统一用：flex: 1 1 0（等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0），再配合 min-width: 0 和 word-break: break-word 防止长文本撑破布局。
- 避免
flex-shrink: 0—— 它会让标签在窄屏下拒绝缩小，直接卡住换行判断 - 慎用
white-space: nowrap—— 很多 UI 库默认重置该值，会阻止含空格或短横线的标签（如React-Router）正常折行 - 临时调试：给子项加
border: 1px solid red，看实际渲染宽度是否随屏幕缩放变化
gap 和 align-content 决定换行后的视觉整齐度
换行后标签上下错位、行间距为 0、末尾多出空白——这些问题基本都出在 gap 和 align-content 搭配不当上。
gap 是控制标签间距的首选，它比 margin 更干净（自动处理首尾无多余间距），但在旧版 Safari 中支持不全，若需兼容可退回到 margin-right + margin-bottom 组合。
align-content 控制的是“多行之间”在交叉轴上的分布，不是单个标签的对齐。默认 stretch 会让每行高度拉满容器，一旦某行标签高度不一（比如有的带图标、有的纯文字），就会产生意外空隙。
- 推荐
align-content: flex-start：所有行顶部对齐，视觉更稳定 - 避免
align-content: stretch：除非容器有固定高度且所有标签高度一致 -
gap: 8px比margin: 4px更易维护，但 iOS 12 以下需降级
移动端必须检查 viewport 和 box-sizing 基础配置
很多“flex-wrap 不换行”问题根本不在 Flex 本身，而是环境缺失。
没加 <meta name="viewport" content="width=device-width, initial-scale=1">，移动端会按桌面宽度渲染，容器宽度虚高，wrap 完全没机会触发。子项用了默认 box-sizing: content-box，再加 padding 就会撑大实际尺寸，进一步挤压可用空间。
- 务必声明 viewport meta 标签，否则所有响应式逻辑都建立在错误基础上
- 全局加
* { box-sizing: border-box; }，让 padding 和 border 不影响 width 计算 - 标签内文字建议用
font-size: clamp(0.75rem, 4vw, 1rem)，避免小屏下字号过大挤爆布局
真正卡住换行的，往往不是 flex-wrap 写错了，而是父容器宽度没约束、子项收缩被锁死、或者基础渲染环境没配齐。调的时候别只盯着那一行 CSS，把 width、flex-shrink、box-sizing 和 viewport 四者拉进同一视野里看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
