flex-wrap: wrap不换行是因为未被激活，主因是父容器缺display: flex、无width/max-width限制、子项有white-space: nowrap或flex-shrink: 0/min-width过大。
flex-wrap: wrap 为什么写了却不换行
不是 flex-wrap: wrap 失效，是它根本没被激活。常见原因有四个：
- 父容器没加
display: flex——flex-wrap只在 Flex 容器里起作用 - 父容器没设
width或max-width（比如只写display: flex），Flex 会无限撑宽自己，没有“换行依据” - 子标签带了
white-space: nowrap（某些 UI 库或 CSS 重置默认加了），文字不折行，标签无法压缩，自然不触发换行 - 子标签设了
flex-shrink: 0或过大的min-width，拒绝收缩，硬顶着不换
每个Tag该用什么flex属性才不压扁、不溢出
默认 flex-shrink: 1 会让长文本 Tag 被压缩变形，而 white-space: nowrap 又阻止内部换行——结果就是文字撑破容器或横向滚动。
正确做法是让每个 Tag「不收缩、不换行、有呼吸感」：
- 显式设
flex-shrink: 0（比flex: 0 0 auto更直白，尤其含 SVG 图标时更稳） - 配
white-space: nowrap保证单个 Tag 内文字不折行 - 用
margin-right和margin-bottom控制水平/垂直间距（注意最后一行末尾多余右距） - 可选加
max-width: fit-content防极端长文本（如带 URL 的 Tag）
换行后标签上下不对齐、高度参差怎么办
这是 align-items: stretch（Flex 默认值）在作怪：当某行有带图标的 Tag 和纯文字 Tag，高度不一致，Flex 会把所有项目拉伸到该行最高项的高度，造成视觉偏移。
解决方法很简单：
- 父容器加
align-items: flex-start，让所有 Tag 顶部对齐 - 子标签统一设
margin: 0和box-sizing: border-box，避免padding/margin累计偏差 - 图标与文字的
line-height必须一致，否则基线偏移；SVG 图标记得加flex-shrink: 0和height: 1.2em - 别在子标签里用
margin-top调位置——响应式一变就失效
移动端标签太密或溢出，怎么平滑响应
不能只靠容器宽度自适应——不同屏幕下期望的单行标签数不同（桌面端 6 个，手机可能只容得下 2 个），需协同控制：
- 每个 Tag 设
min-width: 80px（按1rem ≈ 16px微调），配合gap: 0.5rem，容器宽度自然决定每行容纳数 - 在媒体查询中缩小
min-width或增大gap，比直接改flex-wrap更稳定 - 字体大小建议用
font-size: clamp(0.75rem, 4vw, 0.875rem)，兼顾小屏可读性与大屏密度 -
gap比margin更干净，但注意旧版 Safari 需要-webkit-gap回退
最容易被忽略的是：父容器的 width 或 max-width 必须存在且可计算——它不是装饰，是换行的唯一触发条件。没有它，flex-wrap: wrap 就是摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
