必须写 flex-wrap: wrap 且父容器设明确宽度，否则标签不换行；常见原因包括 flex-wrap 默认 nowrap、父容器无宽度假定无限宽、子项 white-space: nowrap 或 flex-shrink: 0 阻止收缩。
必须写 flex-wrap: wrap，且父容器要有明确宽度约束，否则标签永远挤在一行——这不是 bug，是 Flex 的默认行为。
为什么加了 display: flex 还是不换行？
常见现象：一堆标签横向溢出、右侧内容看不见、缩窄窗口也不折行。
-
flex-wrap默认值是nowrap，不显式设为wrap就不会触发换行逻辑 - 父容器没设
width或max-width，浏览器按内容撑开，认定“永远够宽”，换行条件永不满足 - 标签内用了
white-space: nowrap（比如按钮或带图标的标签），文本不折行 → Flex 计算子项总宽偏大，误判“还能塞” - 子项写了
flex-shrink: 0或固定大宽度（如width: 120px），拒绝压缩，硬撑满整行
怎么让每行刚好显示 N 个标签并自动换行？
关键不是“数个数”，而是用百分比 + gap 控制单个标签的基准尺寸，让浏览器自然判断何时放不下。
- 推荐写法：
flex: 0 0 calc(25% - 12px)（N=4 时），配合gap: 12px；这样既避免 margin 折叠/溢出，又保证四边留白靠父容器padding控制 - 别用
flex: 1或flex: 1 1 auto：它们会让标签抢满剩余空间，彻底失去换行机会 - 如果标签文字长度差异大，加
min-width: 0+overflow: hidden+text-overflow: ellipsis防止单个标签撑爆整行 - 响应式场景可结合
@media动态改flex-basis，比如小屏切为calc(50% - 8px)（每行 2 个）
gap 和 margin 在多行标签中怎么选？
gap 是首选，但得看兼容性；margin 要手动处理首尾溢出问题。
立即学习“前端免费学习笔记（深入）”；
-
gap: 8px同时控制行列间距，语义清晰、无折叠、不污染子项样式 - Safari 14.1 以下不支持
gap，需回退：margin: 4px+ 父容器margin: -4px模拟，但最后一行右/下 margin 仍可能溢出 - IE11 完全不支持
gap，必须用margin+ 清除浮动或 JS 动态移除末尾子项 margin - 注意：
gap不会给容器边缘加留白，四边空白必须由父容器padding提供
真正卡住人的，从来不是漏写 flex-wrap: wrap 这一行，而是没同步盯住三件事：父容器有没有被祖先元素撑成无限宽、子项是否真的能收缩、gap 或 margin 是否在多行下表现一致——调的时候建议把这三项一起拉进 DevTools 的 computed 面板里实时观察。
