元素重叠常因flex-grow、flex-shrink、flex-basis设置不当引起，1. 将易重叠子元素设为flex-shrink:0防压缩；2. 避免多个子项flex-grow过大导致空间争抢；3. 明确设置flex-basis或width及min-width:0防尺寸模糊；4. 检查父容器flex-wrap、子元素定位与margin、内容max-width等细节，合理配置可有效避免重叠。
在使用 Flex 布局时，元素重叠是一个常见问题，通常与 flex-grow、flex-shrink 和 flex-basis 的设置不当有关。要解决重叠问题，关键是理解这些属性如何影响子元素的空间分配。
检查 flex-shrink 是否导致元素被压缩
当容器空间不足时，如果 flex-shrink 不为 0，子元素会自动缩小以适应容器，可能导致视觉上的重叠或内容挤压。
建议：- 将可能重叠的子元素设置 flex-shrink: 0，防止其被压缩。
- 若需保持弹性，可为不同子元素设置不同的 shrink 值，控制压缩优先级。
避免 flex-grow 设置过大引发空间争夺
flex-grow 定义子元素如何扩展以填充剩余空间。若多个元素设置较大的 grow 值，可能导致布局计算异常或与其他样式冲突，间接引起重叠。
建议：- 仅对需要扩展的元素设置 flex-grow: 1，其余保持默认或设为 0。
- 避免所有子项都设置高 grow 值，防止“争抢”空间。
明确设置 flex-basis 或 width 防止尺寸模糊
未设置 flex-basis 或 width 时，浏览器可能无法正确计算初始尺寸，导致布局混乱和重叠。
立即学习“前端免费学习笔记（深入）”；
建议：- 为每个子元素设置明确的 flex-basis（如 200px、30%）或 min-width。
- 使用 min-width: 0 配合 flex-shrink，防止内容过长撑破布局。
其他常见排查点
除了 flex 相关属性，还需注意以下因素：
- 父容器是否设置了 flex-wrap: nowrap？尝试改为 wrap 允许换行。
- 子元素是否有绝对定位或负 margin 导致视觉重叠？
- 文本或图片等内联内容是否未设置最大宽度？添加 max-width: 100% 可预防溢出。
基本上就这些。合理配置 flex-grow、flex-shrink 和 flex-basis，结合明确的尺寸约束，就能有效避免 Flex 布局中的元素重叠问题。不复杂但容易忽略细节。
