用flex实现响应式标签云需设父容器display: flex与flex-wrap: wrap，标签用inline-flex封装文字和flex-shrink: 0的删除按钮，尺寸全用em/rem及clamp()，删除仅移除dom节点。
用 Flex 实现带删除按钮的标签云，核心是让标签本身保持内容宽度、换行自然、删除按钮不干扰布局，同时整体响应容器宽度变化。关键不在加按钮，而在不让按钮破坏 Flex 的自适应逻辑。
父容器必须设为 flex 且允许换行
标签云容器要启用 Flex 上下文，并明确支持多行排列：
- 给容器加 display: flex 和 flex-wrap: wrap —— 缺一不可，否则所有标签强行挤在一行
- 不要设 white-space: nowrap，否则内部文字不折行，标签更难压缩，容易横向溢出
- 容器宽度设为 width: 100% 或 max-width，否则 flex-wrap 没有“换行依据”，会无限延展
- 加 align-items: flex-start，避免不同高度标签（比如带图标或字号不一）被拉伸对齐，造成视觉错位
每个标签用 inline-flex 封装删除按钮
单个标签不能直接放文字+按钮，否则按钮会参与 flex 排列、影响间距和换行。正确做法是把整个标签（文字+删除按钮）包成一个弹性单元：
- 每个标签项用 display: inline-flex，让它只占内容宽、可与相邻标签并排，又保留 flex 内部控制能力
- 标签内用 flex-direction: row + align-items: center 垂直居中文字和按钮
- 删除按钮用 margin-left: 0.25em 或 margin-inline-start: 0.25em（兼容 RTL），别用 margin-right，避免末尾多余空白
- 按钮本身设 flex-shrink: 0，防止小屏下被压缩变形；尺寸用 em 或 rem，比如 font-size: 0.8em; padding: 0.15em 0.4em
尺寸全部用相对单位，禁用固定像素
自适应不是靠断点切换，而是让所有尺寸随容器或字体动态缩放：
- 标签文字用 font-size: clamp(0.75rem, 2.5vw, 1rem)，小屏保底、大屏不撑爆
- 内边距统一用 em：比如 padding: 0.3em 0.8em，随字号缩放，比 px 更协调
- 圆角用 border-radius: 0.3em，图标尺寸也用 em，避免和文字错位
- 绝对不要给标签设 width、min-width 或 flex-grow: 1，这会让它脱离“内容决定宽度”的原则
删除交互要轻量，不触发重排抖动
点击删除时，只需移除 DOM 节点，Flex 会自动重流，无需 JS 调整样式：
- 用 button 元素做删除按钮，加 type="button" 防止表单提交
- 绑定 click 事件后调用 element.closest(".tag").remove()，简洁可靠
- 避免在 JS 中手动改 style.flexGrow 或 style.width，覆盖 CSS 规则且难维护
- 如需删除动画，用 opacity + transform + transition，结束后再 remove，不影响布局流
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
