会，display: none在flex容器中必然触发强制同步重排；元素彻底退出布局计算，剩余子项立即紧凑重排，影响justify-content、flex-grow和order等所有flex属性。
display: none 在 Flex 容器里会重排吗
会，而且是强制同步重排（reflow）。只要子元素设了 display: none，它就彻底退出 Flex 计算流程——justify-content、flex-grow、order 全部重新算，剩余子项立刻紧凑排列。
常见错误现象：display: none 切换太快时页面“闪一下”，或滚动中卡顿；用 JS 批量 toggle 多个子项的 display，触发多次 layout，性能明显下滑。
- 只适合「确定不再显示」的场景，比如权限过滤后永久隐藏某个按钮
- 别在 hover 或 scroll 事件里高频切换它
- 恢复显示时，记得显式设回原本的
display值（如display: flex或display: block），别只写display: initial，否则可能错成inline
visibility: hidden 能替代 display: none 吗
不能直接替代，因为 visibility: hidden 仍占位——Flex 容器当它存在，尺寸、间隙、对齐都不变，只是看不见。
但它确实不重排，适合需要布局稳定性的场景：
- 轮播图预占位：图片加载中，盒子先用
visibility: hidden占好位置，避免加载完成时跳动 - 模态框内局部透出：父层
visibility: hidden，但关闭按钮加visibility: visible仍可点 - 动画过渡：配合
opacity: 0和transition做淡入淡出（注意单独写transition: visibility是无效的）
额外注意：getBoundingClientRect() 对 visibility: hidden 元素仍返回真实尺寸；而 display: none 返回全 0——JS 测量逻辑得跟着区分。
想不重排又不占位，有什么折中方案
没有标准 CSS 解法，但可用组合 hack 绕过重排，前提是能接受 DOM 结构不变 + 额外样式维护成本：
- 给要隐藏的子项加：
visibility: hidden+position: absolute+left: -9999px+margin: 0 - 确保其父容器（即 Flex 容器）没设
position: relative，否则绝对定位会相对于它，干扰其他子项 - 检查父容器是否设了
overflow: hidden，否则-9999px可能被裁掉 - 如果子项有
border或padding，需一并清空，否则残留视觉痕迹
这个方案本质是“骗过浏览器布局引擎”，不是语义化做法，仅限性能敏感且无法改 DOM 的旧项目。
flex: 0 0 0 配合 height: 0 算隐藏吗
它能让元素视觉上消失且不占主轴空间，但不是真正隐藏——仍参与文档流、响应事件、影响 tab 键序，也不被屏幕阅读器跳过。
适用边界很窄：
- 横向 Flex 容器中临时折叠一个面板，要求其他项不重排、但又要“收起来”
- 必须配合
overflow: hidden+height: 0（纵向）或width: 0（横向） - 务必清除
min-height、border、padding，否则仍可能撑开
别把它当 display: none 用。真要语义化隐藏，还是得删 DOM 或切 display。
最常被忽略的一点：Flex 中隐藏逻辑不该只看 CSS，而要和数据层对齐。JS 过滤数组再渲染，比用 CSS 隐藏 50 个子项更轻量、更可控——CSS 隐藏是补救，不是首选。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
