流式标签组应使用display: flex + flex-wrap: wrap实现自动换行，配合gap控制间距、flex-shrink: 0和min-width: max-content防止压缩变形，并注意ie11的padding与box-sizing兼容性问题。
用 flex-wrap: wrap 让标签自动换行
流式标签组的核心就是让容器内的标签在空间不足时自动折到下一行，而不是溢出或强制缩放。关键不是靠 display: inline-block 加 white-space: normal 这类老办法——它们对间距控制弱、换行逻辑不稳，尤其在响应式场景下容易错位。
现代做法是父容器设为 display: flex 并启用换行：
`.tag-group {
display: flex;
flex-wrap: wrap;
gap: 8px; /* 推荐用 gap，比 margin 可靠 */
}`
-
flex-wrap: wrap是触发折行的开关，缺了它就永远单行 -
gap控制标签间距，比给每个.tag加margin-right/bottom更干净——不会在行末多出空隙 - 子元素（标签）默认是
flex-shrink: 1，小屏幕下可能被压缩变形，需要加flex-shrink: 0锁定尺寸
标签宽度不固定时怎么避免挤成一团
如果标签文字长度差异大（比如“PHP”和“TypeScript”），又没设最小宽，flex 可能把它压得过窄，甚至文字换行断裂。这不是布局失效，而是弹性行为默认允许收缩。
解决方法很简单：给每个标签加约束：
`.tag {
flex-shrink: 0;
min-width: max-content; /* 或具体值如 40px */
white-space: nowrap;
}`
-
min-width: max-content让标签至少撑开到自身内容宽度，适合文字长短不一的场景 - 如果要用固定最小宽（比如统一 48px），注意短标签会留白，长标签仍会自然延展
- 务必配
white-space: nowrap，否则英文单词或中文词组可能在非预期位置断行
IE11 兼容时 flex-wrap 的坑
IE11 支持 flex-wrap，但有个经典 bug：当父容器有 padding 且子元素用了 flex-shrink: 0，换行后第一行末尾标签可能被截掉一半。
绕过方式不是降级回 inline-block，而是微调计算逻辑：
- 把父容器
padding挪到内部一层空div上，让 flex 容器本身无 padding - 或者改用
display: -ms-flexbox+-ms-flex-wrap: wrap，并确保所有 flex 相关属性都加-ms-前缀 - 更省事的做法：给标签加
box-sizing: border-box和明确的border（哪怕border: 1px solid transparent），能稳定 IE11 的尺寸计算
响应式断点下如何控制每行数量
纯靠 flex-wrap 只能“够不着就换行”，没法精确说“小屏最多 3 个/行”。真要控制数量，得结合容器宽度和标签尺寸做推算。
最可控的方式是用 CSS 自定义属性 + calc() 动态设 max-width：
`.tag-group {
--tag-min-width: 72px;
--tag-gap: 8px;
}
@media (max-width: 768px) {
.tag-group {
max-width: calc((var(--tag-min-width) + var(--tag-gap)) * 3 - var(--tag-gap));
}
}`
- 公式里减去一个
gap是因为 n 个标签只有 n−1 个间隙 - 标签本身仍保持
flex-shrink: 0，所以容器到临界宽度就会自然触发新行 - 别用
width而用max-width，保留大屏下的自由伸展能力
复杂点在于标签内图标、边框、字体大小变化都会影响实际宽度，上线前得在真机上测几个典型尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
