visibility:collapse在Flex容器及子项上无效，等同于visibility:hidden；真正释放空间并重排须用display:none。
visibility: collapse 在 Flex 容器及其子项上根本无效——它只对表格元素有意义，用在 Flex 布局里等同于 visibility: hidden。
visibility: collapse 不是通用隐藏方案
很多人看到 collapse 这个词，下意识觉得“比 hidden 更彻底”，但 CSS 规范明确限定：该值仅对表格相关元素（如 <tr>、<code><col>）有特殊语义；对 div、span 或任何 Flex 项目，浏览器会直接降级为 visibility: hidden，既不释放空间，也不影响布局流。
Flex 布局的子项（flex item）本身不是表格单元，也没有“列宽重分配”或“行塌缩”的概念。所以写 visibility: collapse 和写 visibility: hidden 效果完全一致，且更易误导后续维护者。
Flex 中真正释放空间的隐藏方式只有 display: none
Flex 容器要“真正移除某个子项并重排剩余项目”，唯一可靠的方式是让该项目脱离文档流：display: none。
立即学习“前端免费学习笔记（深入）”；
-
visibility: hidden：元素仍占位、仍参与 flex 计算（比如flex-grow分配、justify-content对齐），只是不可见 -
opacity: 0：同上，还额外触发合成层，可能影响性能 -
position: absolute：破坏 flex 流，需手动调位置，且容易引发父容器高度塌陷 -
display: none：子项被完全忽略，flex 容器重新计算主轴尺寸、换行、对齐，行为可预测
为什么有人误以为 collapse 在 Flex 中有效？
常见混淆来源：
- 把表格内嵌在 Flex 容器里，然后对
<tr> 用 <code>collapse——生效的是表格逻辑，不是 Flex 逻辑 - 开发者工具里看到 computed
visibility是collapse，就以为“起作用了”，但没检查布局是否真变化 - 某些旧版 Polyfill 或 UI 框架（如早期 Ant Design 表格组件）内部做了封装，掩盖了真实 DOM 状态
- 需要过渡动画？用
display无法动画，那就组合：先visibility: hidden+opacity: 0+transform: scale(0.95)，动画结束后再设display: none - 需要响应式条件隐藏？用媒体查询配合
display: none，别绕弯 - 服务端渲染时想避免 SSR 和 CSR 渲染不一致？
display: none在两端行为一致，collapse在非表格环境根本无定义
验证很简单：给 Flex 子项加 visibility: collapse 后，用 JS 调 el.getBoundingClientRect()，它的 width/height 依然非零，且 offsetParent 仍在；而 display: none 下这些值全为 0 且 offsetParent 为 null。
替代 visibility: collapse 的实际需求怎么解？
如果你想要的是“隐藏但保留占位”，直接用 visibility: hidden 就行；如果想要“隐藏且重排”，必须用 display: none。没有中间态。
记住：Flex 布局的隐藏逻辑非常干净——要么在流里（不管是否可见），要么彻底不在流里。不存在“半塌缩”这种模糊状态。
