先记住这个答案
权限按钮隐藏后，导航项目会不会补位，要看它是否还生成布局盒子。display: none 不生成 Flex 项，因此其他项目重新排列；visibility: hidden 仍保留盒子，只是内容不可见，空位还在。两种方式都没改变 DOM 节点顺序；若又设置了 order，也应先判断隐藏的元素还参不参与 Flex 布局。
display: none不参与 Flex 排列visibility: hidden通常保留占位order只排列仍存在的盒子- 两种隐藏都不改 DOM 顺序
权限按钮隐藏后的导航空位
导航栏里有“帮助”按钮，按用户权限隐藏。用 display: none 时，余下按钮重新排布，gap 也按余下项目计算。用 visibility: hidden 时，用户看不到按钮，原来的空位还在，容易造成奇怪的间隔。若设计确实要在加载过程中占位，后者有用途；权限控制通常更适合从渲染结构中移除不该出现的控件。
.nav {
display: flex;
gap: 12px;
}
.nav__disabled { display: none; /* 不参与 Flex 排列 */ }
.nav__placeholder { visibility: hidden; /* 仍保留盒子 */ }
.nav__last { order: 2; /* 只影响仍参与布局的项目 */ }被 display: none 的项目没有 Flex 盒子；隐藏但占位的项目仍参与排序。
是否生成布局盒子决定占位
order 为参与布局的 Flex 项形成视觉顺序。一个元素设 display: none 后没有布局盒子，也就没有可排序的 Flex 项。visibility: hidden 的盒子仍存在，继续按它的 order 和尺寸占据相应位置。visibility: collapse 对 Flex 项还有特殊的折叠行为，但跨行布局细节复杂，不应把它等同于通用的 hidden 或 none。此外，order 只改视觉顺序，屏幕阅读器与键盘焦点仍需按文档结构检查。
一个容易复现的例子是四个导航入口，其中第二个按权限隐藏。使用 display: none 时，后面入口会向前补位，gap 也只计算仍参与布局的项目；使用 visibility: hidden 时，第二个入口占位还在，后面入口位置基本不变。再给第四个入口设 order: -1，它只改变仍参与布局的项目的视觉排序。业务上若隐藏项不应被读屏访问，不能只靠透明度；若希望保留占位，应确认空白不会误导用户。
容易答错的地方
- 以为
display: none只是透明 - 它移除该元素的布局盒子，余下项目会重新分配空间；透明由
opacity控制。 - 以为
visibility: hidden能让后面项目补位 - 它一般保留占位，其他项目仍会围绕这个盒子排布。
面试官还会怎么问？
把 display 改回来后顺序是什么？
元素重新生成 Flex 项，按自身 order 值和同值项目的 DOM 顺序参与排列。
opacity: 0 与 visibility: hidden 一样吗？
不一样。透明元素仍在布局里，通常也仍可命中指针与焦点；visibility: hidden 则隐藏可见内容并影响交互。
隐藏控件会影响键盘访问吗？
display: none 的控件通常不会进入顺序焦点导航；权限敏感的控件还应从业务逻辑和服务端权限上处理。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。