flex-wrap: nowrap 是默认值，元素挤出容器时不会自动换行；需配合 flex-wrap: wrap、flex-shrink: 1、min-width: 0 和断行属性才能真正防重叠。
flex-wrap: nowrap 是默认值，元素挤出容器时不会自动换行
Flex 容器默认 flex-wrap 为 nowrap，所有子项强行排在一行，宽度超容器时直接溢出或重叠（尤其在响应式缩放、字体放大或内容动态增长时）。这不是 bug，是设计行为——Flex 优先保持“单行流”，不主动折行。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只要子项数量不确定、宽度不可控，或需适配小屏，必须显式设置
flex-wrap: wrap或wrap-reverse - 注意：仅设
flex-wrap不够，还需确保父容器有明确宽度（如width: 100%）且子项不强制撑满（避免flex: 1无约束地扩张） - 常见错误是只加
flex-wrap却忘了给子项设min-width: 0—— 文字过长或图片无约束时仍会撑破布局
flex-shrink 和 flex-basis 配合 wrap 才真正防重叠
flex-wrap: wrap 只解决“换行”，但若某子项自身宽度过大（比如一段长 URL、未断行的英文单词、未限制尺寸的图片），它仍会独占一行并溢出，导致视觉上像“卡住没换行”。这时需要控制子项收缩能力。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对可能过长的内容容器，加
flex-shrink: 1+min-width: 0（触发 shrink 的前提） - 用
flex-basis替代固定width：例如flex: 1 1 200px比width: 200px; flex: 1更安全，前者允许收缩，后者在nowrap下可能失效 - 对内联文本，补充
word-break: break-word或overflow-wrap: break-word，防止长单词阻断换行逻辑
媒体查询中 flex-wrap 切换要同步调整 justify-content
当从 wrap 切回 nowrap（比如桌面端恢复单行），若子项总宽度小于容器，justify-content: space-between 会拉大间距；但若子项已换行过，再切回单行时容易因残留 margin 或未重置的 flex-direction 导致错位或重叠。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在媒体查询里切换
flex-wrap时，一并重置关键对齐属性：justify-content: flex-start（避免 space-* 类行为干扰） - 避免在不同断点混用
flex: 0 0 auto和flex: 1，易造成尺寸计算冲突；统一用flex: 0 1 auto或带具体flex-basis值更可控 - 调试时临时加
outline: 1px solid red到子项，能快速识别是“真重叠”还是“视觉错觉”（如阴影/负 margin 造成）
flex-wrap 在 Grid/Flex 混合布局中容易被忽略的继承问题
如果 Flex 容器本身是 CSS Grid 的一个 grid item，它的 flex-wrap 生效，但它的子项若也是 Flex 容器，其内部 flex-wrap 不会受外层影响——这点看似理所当然，但实际开发中常有人误以为“外层 wrap 了，里面就安全”，结果内层文字仍溢出。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每一层 Flex 容器都应独立评估是否需要
flex-wrap，不能依赖父级“兜底” - 组件化开发时，在原子组件（如
Tag、Chip）的根元素上预设flex-wrap: wrap和min-width: 0，比每次调用时补更可靠 - 用 DevTools 的 Layout 面板检查 computed
flex-wrap值，确认生效层级；有时display: contents或visibility: hidden会让 flex 属性不参与渲染计算
flex-wrap 不是万能开关，它只管“要不要折行”，不管“能不能折得动”——真正防重叠，靠的是 wrap + shrink + min-width + 断行策略四者配合。漏掉任意一环，都可能在某个设备或数据场景下突然失效。
