加了display: flex却不换行，根本原因是漏写flex-wrap: wrap——它默认为nowrap，必须显式声明才能开启换行；还需父容器有明确宽度、子项无white-space: nowrap、且flex值设为0 1 auto并配min-width: 0。
加了 display: flex 却不换行，基本就是漏写了 flex-wrap: wrap ——它不是可选项，是开关。
为什么写了 display: flex 还是单行溢出
因为 flex-wrap 默认值是 nowrap，浏览器根本不会考虑换行。你得显式写上 flex-wrap: wrap 才算真正打开这个功能。
- 检查开发者工具里
flex-wrap是否被划掉（strikethrough），常见于 CSS 重置或 UI 框架悄悄把它改回nowrap - 父容器必须有明确宽度：比如
width: 100%、max-width: 600px，否则它会无限撑宽，“没空间”就不换 - 子标签若带
white-space: nowrap（某些组件库默认加），也会阻止换行，需覆盖为white-space: normal
flex: 0 1 auto 和 flex: 0 0 120px 怎么选
标签云的核心是“按内容自适应宽度”，不是均分空间。用错 flex 值会让标签被拉宽或卡死不换行。
-
flex: 0 1 auto：不放大、可缩小、基准宽由文字决定——适合大多数标签，但必须配min-width: 0，否则长文本撑破换行逻辑 -
flex: 0 0 120px：固定基础宽，不伸缩——适合需要统一最小宽度的场景，比如带图标的标签 - 避免混用：同一容器内别有的写
flex: 1，有的写flex: 0 0 auto，会导致换行错乱 - 别用
flex: 1或flex: 1 1 100%，这会让所有标签强行均分，小标签变胖、大标签被压扁
换行后标签上下不对齐、末行稀疏
这不是换行失败，而是 align-items: stretch（默认）在作怪：同一行中高度不同的标签会被拉到一样高，视觉错位；而 justify-content: space-between 只作用于单行，末行只剩一个标签时就被拉到两边。
- 统一顶部对齐：父容器加
align-items: flex-start - 控制多行整体垂直位置：加
align-content: flex-start（注意：只在多行时生效） - 间距优先用
gap: 8px，比margin更干净，且不会在换行时产生额外顶部/底部空白 - 别对标签设固定
height，留白难看；如需等高，display: grid比 Flex 更合适
移动端文字撑破标签、换行失效
flex-wrap 管的是子元素级换行，不是子元素内部的文字换行。一个超长 URL 或无空格字符串，会把整个标签撑宽，导致换行逻辑失效。
- 给标签加
word-break: break-word或overflow-wrap: break-word - 给标签本身加
min-width: 0，解除 Flex 项目默认的最小尺寸保护，允许其收缩 - 确认没设
white-space: nowrap——这会直接禁用所有换行行为 - IE11 不支持
gap，也不稳定解析calc()，要用margin模拟间距，并改用flex: 0 0 50%这类确定值
真正卡住你的往往不是 flex-wrap: wrap 这一行代码，而是它和 min-width、white-space、align-content 的配合细节——尤其在小屏下，一个没关掉的 white-space: nowrap 就能让整组标签横着跑出屏幕。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
