flex-wrap: wrap 在移动端不生效主因是父容器缺 width/max-width 约束或子项含 white-space: nowrap、固定宽度未配 flex-shrink: 1，导致换行条件未触发。
flex-wrap: wrap 在移动端标签块中不生效，基本是因为父容器缺宽度约束或子项拒绝收缩——不是属性写错了，是它根本没被触发。
为什么 flex-wrap: wrap 在手机上完全没反应
常见现象：PC 上好好的换行，一到 iPhone 或安卓真机就卡死在一行，横向滚动或溢出。这不是 Safari 或 Chrome 的 bug，而是布局条件没凑齐。
- 父容器没设
width或max-width（比如只写了display: flex，没写width: 100%），浏览器认为“无限宽”，自然不换行 - 子标签元素写了
white-space: nowrap（常来自重置样式或第三方 UI 库），直接锁死换行能力 - 子项设置了固定宽度（如
width: 120px）且没配flex-shrink: 1，iOS Safari 会无视flex-wrap强行撑开 - 用了
flex-flow: wrap row这种错误顺序——必须是flex-flow: row wrap，否则整条声明被忽略，DevTools 里会显示为划掉
移动端标签块换行的最小可行配置
别堆媒体查询，先让基础换行跑通。以下四行是真正起效的底线：
ul.tag-list {
display: flex;
flex-wrap: wrap;
width: 100%;
gap: 8px;
}
-
width: 100%是硬性要求，不能靠max-width代替（某些 Android WebView 下max-width不触发换行） -
gap在 iOS 15.4 以下不支持flex-wrap换行后的间距渲染，若需兼容旧版 Safari，改用margin+first-child/last-child排除首尾 - 子标签推荐加
flex-shrink: 1和min-width: max-content（或更稳妥的min-width: 0），防长文本卡死换行逻辑
悬停热区和点击区域在移动端失灵怎么办
移动端没有 :hover，但很多团队仍用 :hover 做视觉反馈，结果在手机上点不动、没变化——这其实是设计误用，不是 CSS 写得不对。
立即学习“前端免费学习笔记（深入）”；
- 别依赖
:hover控制标签状态，改用:active+cursor: pointer+-webkit-tap-highlight-color: transparent - 确保标签是
<a></a>或<button></button>，纯<span></span>在 iOS 上默认不可聚焦，click事件可能不触发 - 如果用了
transform: scale(0.99)等 hack 触发硬件加速，检查是否意外缩小了点击热区（尤其当配合padding使用时） - 快速验证：临时加
outline: 1px solid red到:active，看是否真覆盖了整个标签块
小屏下标签挤成一团或留大片空白
这是响应式换行最隐蔽的问题：不是换不了，是换得“不对劲”。gap、padding、font-size、min-width 四者没联动调整，导致小屏下要么撑满还剩半格，要么换行后末行只剩一个标签。
- 移动端建议把
gap从 12px 降到 6px，padding从4px 12px缩到3px 8px，字体缩到14px - 避免给每个标签设
min-width: 80px——窄屏下强制换行，顶部稀疏、底部拥挤；换成min-width: fit-content或按内容弹性伸缩 - 如果标签文字长度差异极大（比如“AI” vs “人工智能生成式大模型”），
flex-wrap无法跨行对齐，justify-content: space-between只作用于单行，末行会明显空荡；此时不如放弃拉齐，改用text-align: left+ 合理gap更真实
flex-wrap 换行本身简单，难的是在视口频繁变化、输入法弹窗遮挡、系统字体缩放等真实场景下，让标签块始终“可点、可读、不破相”。调的时候得把 gap、padding、font-size、min-width 当成一套参数一起动，而不是单独修一个。
