先别急着归咎于Flex的“bug”，你很可能只是无意间触发了视觉重叠机制——最常见的原因包括margin负值、z-index未配合position使用，或者order属性设置不当。遇到这类情况，建议第一步：暂时禁用所有z-index，为每个子元素添加outline: 1px solid red，观察实际占位位置，再逐一排查问题。
排查负margin是否导致元素重叠
负margin仅仅移动了元素的渲染位置，但其布局占位空间并未改变。后续兄弟元素依然按照其原本的占位进行排列，因此会覆盖前面的元素，造成视觉上的重叠错觉。
flex-direction: row下使用margin-left，若误写为margin-top则不会生效gap: 10px与margin-left: -15px组合，实际只会覆盖前一项5px，因为负margin先抵消了gap- 父容器设置
overflow: hidden会裁剪溢出部分，导致重叠不可见——需检查计算后样式中的overflow是否为visible - 在
justify-content: center等对齐模式下，负margin可能会被容器“纠正”，并非失效，而是Flex主动重置了布局
验证z-index是否真正生效
在Flex子元素上，z-index默认不生效，因为子元素默认的position值为static。未设置position属性时，z-index不会参与层叠计算。
- 必须显式添加
position: relative（或absolute/fixed），z-index才能参与层叠计算 - 两个同级子元素：A设置
position: relative; z-index: 2，B未设置position，则B始终位于A下方，即使B在HTML中写在后面 - 父容器若包含
transform、filter或will-change，会意外创建新的层叠上下文，导致子元素的z-index被截断 - 调试时，可临时移除所有
z-index，使用浏览器Layers面板确认是否存在层叠，还是单纯视觉错觉
不要依赖order解决重叠问题
order仅改变元素的显示顺序，对间距、尺寸、层叠均无影响。即使将order: -1使某元素排在最前，它仍需按照默认的flex-grow和gap规则占据空间。
order值相同时，元素严格遵循HTML文档顺序排列，不会自动吸附或合并- 配合
flex-wrap: wrap时，order仅在单行内生效；换行后新行会从左到右重新按order排序，容易产生意外交错 - 若想让按钮浮在卡片右上角，
order无法实现，需使用position: absolute结合z-index - 使用
transform: translateX(-20px)替代margin-left: -20px更简洁——不参与盒模型计算，不触发重排
优先使用gap替代margin控制间距
边框重叠、间隙错乱，多半是手动管理margin导致的问题。Flex自带的gap属性，可以统一、无副作用地控制子元素间距。
.parent { display: flex; gap: 12px; }→ 子元素之间自动留出空隙，边框不再接触gap不占用布局空间，不影响焦点流和屏幕阅读器遍历- IE全系不支持
gap；Safari 14.1+才开始支持Flex中的gap（旧版仅支持Grid） - 兼容性要求较高时，可降级使用
.item + .item { margin-left: -1px; }，但务必把边框宽度抽取为CSS变量（如--border-width: 1px），避免媒体查询中遗漏修改
最容易被忽略的一点：重叠往往不是布局逻辑错误，而是你同时为多个相邻元素添加了完整边框，又未使用gap或负margin进行协调——此时用描边检查，边界明明没有越界，只是两条边框线紧挨着“加粗”了而已。
