display: none 会彻底跳过 flex 排列计算，元素不占空间、不影响 order 排序；order 仅在 display: flex 容器内生效，且与 display: none 互斥。
display: none 会彻底跳过 flex 排列计算
只要一个元素设置了 display: none，它就不再参与 Flex 布局的任何阶段——既不占空间，也不影响 order 值的排序逻辑，其他元素会像它不存在一样重新排列。
这和 visibility: hidden 或 opacity: 0 有本质区别：后两者元素仍在文档流中，order 依然生效，只是看不见。
- 常见错误现象：
order值看起来“失效”了，其实是被display: none的元素挡住了视觉判断——它根本没进 flex 排序队列 - 使用场景：需要动态移除某个 item 并让其余 item 紧凑重排（比如过滤列表、条件展示表单项）
- 性能影响：比
visibility更轻量，浏览器无需为隐藏元素计算布局、绘制
order 属性只在 display: flex 容器内有效
order 是 Flex 专属的排序控制属性，对 display: block、display: grid 或普通文档流完全无效。如果父容器不是 flex 容器，写再多 order: 99 也没用。
- 常见错误现象：元素加了
order却没变化，检查父级是否漏写了display: flex或display: inline-flex - 参数差异：
order默认值是0，数值越小越靠前；支持负数（如order: -1），但不要依赖过大绝对值，可读性差 - 兼容性注意：IE10+ 支持，但 IE10/11 对
order的实现有 bug（比如与flex-grow冲突时行为异常），生产环境需测试
隐藏 + 重排组合操作要避免 layout thrashing
如果连续修改多个元素的 display 和 order，尤其在循环或事件回调里，可能触发多次强制同步布局（reflow），造成卡顿。
- 实操建议：把所有 DOM 修改集中做，比如先统一设
display: none，再统一设order，而不是每个元素交替设置 - 更稳妥做法：用 class 切换代替内联样式，例如
.hidden { display: none; }和.first { order: -1; }，靠 CSS 规则批量控制 - 示例片段：
items.forEach(el => el.classList.toggle('hidden', shouldHide(el)));<br>items.forEach((el, i) => el.style.order = getDesiredOrder(i));—— 这样写容易出问题；应改为先收集状态，再分两轮更新
用 visibility: hidden 模拟“保留占位”的隐藏需求
有时候你不想让元素消失后其他项“啪”一下挤过去，而是希望它留个空位——这时 display: none 就不合适了，得换方案。
- 可用替代：
visibility: hidden+position: absolute（慎用，会脱离文档流）或单纯visibility: hidden（保留占位，order仍起作用） - 注意点：如果用了
visibility: hidden，记得同时设pointer-events: none，否则鼠标悬停/点击仍可能触发交互 - 性能提示：相比
display: none，visibility: hidden仍需布局计算，大量隐藏项时帧率可能受影响
Flex 布局里 display: none 和 order 不是“配合使用”的关系，而是互斥的两个阶段：前者决定“参不参与”，后者只在“参与者内部”起效。很多人卡在以为能一边隐藏一边调序，其实得先想清楚——你到底要的是“移除”还是“藏起来”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
