display: none在Flex中强制重排且使order失效，因其完全退出布局流；visibility: hidden虽不重排但保留占位并引发遮挡、焦点等问题，高频切换更易导致性能崩塌。
Flex容器中display: none会强制重排
因为display: none让元素彻底退出flex布局流，容器必须重新计算所有剩余子项的尺寸分配、对齐位置和order顺序——哪怕只隐藏一个，整个flex容器的layout都会重算。
display: none在Flex中使order失效
被设为display: none的弹性项完全不参与flex算法：它的order值被忽略，flex-grow归零，justify-content对其“视而不见”。其他可见项的排列顺序不会因它的order变化而改变，也不会为它留空位。
- 常见错误：给按钮加
display: none后还试图调el.style.order = '99'来控制它“该排在哪”，实际毫无效果 - 如果真需要隐藏但保留排序锚点，改用
visibility: hidden+order组合 - 若目标是让其他项自动填补空位，
display: none是对的，但得手动调整剩下项的order值来对齐预期顺序
为什么不用visibility: hidden替代所有场景
visibility: hidden确实不触发重排，但它保留占位——在flex容器中，这会导致空白间隙、遮挡风险或点击穿透（尤其没配pointer-events: none时）。
- 父级flex设了
align-items: center，隐藏项仍占据高度，可能把其他项“顶偏” - 多个
visibility: hidden项堆叠时，tab键焦点仍会落到它们身上（需加tabindex="-1"） - 它继承，子元素若没显式设
visibility: visible，照样看不见——这点常被漏掉
高频切换时性能崩塌的真实原因
每次切display: none ↔ block（或任意非-none值），浏览器都得：重建渲染子树 → 重跑flex layout算法 → 重排所有受影响祖先 → 重绘。连续操作3次以上，很容易卡顿。
- 别在
scroll或mousemove里直接设style.display，先节流，再用requestAnimationFrame批量提交 - 避免循环中读取
offsetHeight后再设display: none，这会强制同步布局，引发layout thrashing - 真正要省开销，不是换写法，而是减少切换频次：比如Tab面板用单个DOM+CSS类切换内容，而非反复显示/隐藏整组
真实麻烦的地方不在“怎么藏”，而在于藏完之后，那个原本由flex自动分配的尺寸、间距、对齐逻辑，已经不可逆地变了——你得自己补上这些隐含约束，否则视觉和交互都会出偏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
