flex-wrap 是 css flexbox 中控制子项是否换行的属性，默认 nowrap 会强制单行，设为 wrap 后子项按需折成多行且保持 flex 对齐逻辑；它不缩放内容，需配合 flex-shrink: 0、min-width 和 white-space: nowrap 等使用。
flex-wrap 是什么，为什么它能解决标签溢出
当一堆 span 或 button 挤在一行里，容器宽度不够时，它们会强行换行、折断文字，甚至撑破父容器——这不是“溢出”，是布局失控。flex-wrap 的作用就是明确告诉 flex 容器：“别硬撑，该换行就换行”。它的默认值是 nowrap，也就是死扛到底；设成 wrap 后，子项才会按需折成多行，且每行内部仍保持 flex 对齐逻辑。
关键点在于：它不改变单个标签的尺寸或内容，只调整排列方式。所以它适合标签云、筛选条件、技术栈 badge 这类动态增减、宽度不可控的场景。
怎么用 flex-wrap 实现“不换行但自动缩放”是常见误解
flex-wrap: wrap 本身不会缩放标签，也不会隐藏内容。很多人以为开了它就能“优雅”，结果发现标签还是挤成一团、文字被截断——其实是漏掉了配套的 flex 子项控制。
- 必须给子项（如
.tag）设置flex-shrink: 0，否则默认会压缩宽度导致文字折行或省略 - 如果希望单行内尽可能多放、超出才换行，要配合
min-width（比如min-width: 64px）限制最小尺寸，避免过窄变形 - 别忘了设
white-space: nowrap在子项上，防止标签内文字自己换行
flex-wrap + justify-content 导致末行对齐错乱
当启用 flex-wrap: wrap 后，justify-content: space-between 只作用于**当前行内**，最后一行如果只有 1–2 个标签，就会被拉到两端，看起来像“散开”了——这不是 bug，是规范行为。
立即学习“前端免费学习笔记（深入）”；
解决办法不是换掉 justify-content，而是加一层包裹或改用 gap：
- 用
gap: 8px替代margin控制间距，它对多行 flex 布局天然友好 - 如果必须左对齐末行，把
justify-content改成flex-start，再靠gap统一间隔 - 绝对不要用
text-align: justify强行撑满，它对 flex 子项无效，还可能干扰换行逻辑
IE11 兼容性坑：flex-wrap 不是万能的
IE11 支持 flex-wrap，但有真实 bug：当子项含 inline-flex 或嵌套 flex 时，换行计算会出错；更麻烦的是，它不支持 gap，而 gap 正是现代方案的核心。
如果项目还要兼容 IE11：
- 放弃
gap，改用margin-right+:last-child清除，但要注意换行后首项的 margin 不会自动重置 - 给容器加
display: -ms-flexbox和-ms-flex-wrap: wrap，并确保子项也加-ms-flex前缀 - 更稳妥的做法是降级为
inline-block+word-break: keep-all，虽然不够灵活，但稳定
真正容易被忽略的，是换行触发时机：它只看容器剩余宽度是否小于子项的 **flex-basis + margin**，而不是内容长度。所以哪怕标签文字很短，只要设置了过大的 min-width 或没关 flex-shrink，它照样不换行。
