display: none 会使元素脱离布局，order 属性失效；需用 visibility 或 opacity 配合 JS 动态调整顺序，确保隐藏与排序逻辑正确。
在使用 Flexbox 布局时，子元素的隐藏与显示常常会影响布局顺序和视觉呈现。结合 order 属性和 display 属性，可以灵活控制元素的排列与可见性，但需要注意它们之间的交互逻辑。
理解 order 与 display 的作用
order 属性用于定义 flex 子元素在容器中的排列顺序，默认值为 0。数值越小，越靠前。通过调整 order，可以改变视觉顺序而不影响 DOM 结构。
display: none 会完全从文档流中移除元素，不占据空间，也不参与 flex 布局。其他 display 值（如 block、flex）则让元素正常参与布局。
隐藏元素时的 order 行为
当一个 flex 子项设置为 display: none 时，它不再参与 flex 容器的布局计算，包括 order 排序。也就是说，即使它的 order 值很小，也不会出现在布局中。
示例：
.container {
display: flex;
}
.item1 { order: 2; }
.item2 { order: 1; }
.item3 { order: 0; display: none; }
此时 .item3 被隐藏，不占位也不参与排序，实际显示顺序是 .item2、.item1。
动态切换显示状态的处理方法
若需要根据条件切换元素显示，并保持特定顺序，建议避免使用 display: none 直接控制，或配合 JavaScript 动态调整 order。
常用策略：
- 用 visibility: hidden 隐藏元素但仍保留其在布局中的位置和 order 影响
- 用 opacity: 0 配合指针事件禁用实现视觉隐藏，保留布局流
- 通过 JS 在显示时动态设置合适的 order 值，确保顺序正确
- 使用 class 控制 display 和 order 联动，例如：
.hidden { display: none; }
.visible { display: flex; order: 1; }
响应式场景下的建议
在媒体查询中更改元素 order 并同时控制显示时，确保 display 变化不会导致意外重排。例如：
@media (max-width: 768px) {
.sidebar { order: -1; display: none; }
.main { order: 0; }
}
这样在小屏下侧边栏被隐藏，主内容自然占据全部空间。
基本上就这些。关键是理解 display: none 会让元素彻底退出 flex 参与，而 order 只对可见且在文档流中的子项生效。合理搭配 CSS 类或 JS 控制，就能实现灵活的布局切换。
