flex-wrap: wrap 是实现tag自动换行的关键，需与 display: flex 同时作用于容器；各tag设 flex-shrink: 0、white-space: nowrap、margin 控制间距，响应式下用 gap 或 margin 配合 min-width 优化布局。
flex-wrap: wrap 是实现Tag自动换行的关键
不加 flex-wrap，所有 Tag 会强行挤在一行，超出容器也不换行——这是最常踩的坑。必须显式设为 wrap，否则 flex 默认只做单行布局。
常见错误现象：标签文字被截断、容器横向滚动、右侧标签消失。
-
display: flex要加在标签容器（如.tag-list）上，不是每个Tag元素上 -
flex-wrap: wrap必须和display: flex同时存在才生效 - 避免给容器设固定高度，否则换行后下一行可能被裁剪
每个Tag需要 shrink + margin 控制间距与溢出
默认情况下，flex-shrink: 1 会让长文本Tag被压缩变形，而 white-space: nowrap 又阻止换行——结果就是文字撑破容器或溢出。
正确做法是让每个Tag「不收缩、不换行、有呼吸感」：
- 给每个
Tag元素设flex-shrink: 0 - 用
margin-right和margin-bottom分别控制水平/垂直间距（注意最后一行末尾多余右距） - 搭配
white-space: nowrap保证单个Tag内文字不折行 - 可选：加
max-width: fit-content防极端长文本（如带URL的Tag）
响应式场景下要防小屏标签堆叠过密
在移动端，如果只靠 flex-wrap，多个短Tag可能挤满整行后只剩一点空隙，导致下一行只放一个Tag，视觉失衡。
解决思路不是调 flex-basis，而是用最小宽度+弹性间隙：
- 给每个
Tag设min-width: max-content或具体值如min-width: 40px - 用
gap: 8px替代margin（更干净，且自动处理末尾间距）——但注意 Safari 旧版本不支持gap在 flex 中 - 小屏可配合媒体查询缩小
font-size和padding，而非强行压缩布局
遇到IE11兼容需绕过 gap 和 flex-shrink: 0
IE11 不支持 gap，且对 flex-shrink: 0 的解析不稳定（尤其含 min-width 时）。
稳妥方案：
- 用
flex: 0 0 auto替代flex-shrink: 0（IE11 完全支持） - 放弃
gap，改用margin并加伪类清除末尾：比如.tag-list .tag:last-child { margin-right: 0; } - 避免
fit-content，改用min-width+padding组合模拟
真正难的不是写出来，是当后台动态插入一堆长度不一的Tag时，既不让某一个撑爆整行，又不让换行后留大片空白——这得靠 min-width、flex-shrink 和 gap 的组合手感，而不是抄一段代码就完事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
