flex-wrap 是什么，为什么它能防止内容重叠
flex-wrap 是 Flex 容器的 CSS 属性，控制子项在主轴空间不足时是否换行。默认值是 nowrap，所有子项强行挤在同一行，超出容器宽度就溢出或重叠（尤其在响应式场景下）。设为 wrap 后，Flex 会自动把放不下的子项移到下一行，从根源上避免视觉重叠和内容裁剪。
什么时候必须显式设置 flex-wrap: wrap
以下情况不设 flex-wrap: wrap 很容易出问题：
- 子项宽度固定（如
width: 200px）且数量不确定 - 使用
flex: 1或flex-grow: 1但容器宽度动态变化（比如侧边栏收缩） - 响应式布局中，父容器宽度随屏幕缩小，而子项未做弹性收缩处理
- 配合
justify-content: space-between时，最后一行只剩一个子项，若不换行会导致左右间距异常，视觉上像“被拉伸重叠”
flex-wrap 常见取值与实际表现差异
flex-wrap 有三个合法值，行为差别直接影响布局是否“干净”：
-
nowrap：全部子项强制单行，溢出部分不可见或覆盖其他元素（典型重叠源头） -
wrap：默认换行方向是自上而下，新行在旧行下方，适合大多数横向布局 -
wrap-reverse：换行方向反转，新行出现在旧行上方，适合某些特殊滚动或倒序展示场景，但容易误判为“内容消失”，需配合align-content调整对齐
注意：flex-wrap 只对直接子元素生效，嵌套 Flex 容器需各自设置。
立即学习“前端免费学习笔记（深入）”；
配合 min-width 和 flex-basis 避免换行过早或过晚
只设 flex-wrap: wrap 不够，子项自身尺寸策略决定换行时机：
- 子项没设
min-width且用了flex: 1，可能被过度压缩，导致文字折行、图标错位，看似“没重叠”，实则内容挤压变形 - 推荐组合写法：
flex: 0 1 auto+min-width: 240px，表示“不放大、可缩小、最小宽 240px”，让换行点更可控 - 避免用
width: 100%在 Flex 子项里，它会和flex-basis冲突，导致换行计算失准 - 调试技巧：临时加
outline: 1px solid red到子项，看清实际占位与换行位置
真正难的不是加 flex-wrap，而是让每个子项在不同断点下既保持可读性，又不因弹性缩放引发内部重叠（比如按钮图标和文字挤在一起）。这需要结合 min-width、flex-shrink 和媒体查询共同约束。
