Flex布局中“隐藏”子元素应避免display:none，优先用flex:0 0 0配合overflow:hidden/height:0实现视觉隐藏不占空间，或用visibility:hidden+flex:0保持占位；display:none会触发Flex重排，仅适用于彻底移除场景。
在 Flex 布局中，子元素“隐藏”通常不是靠 display: none（它会彻底脱离布局），而是想实现「视觉上不占空间但保留 DOM 结构」或「条件性收起/展开」。此时应优先使用 flex 相关属性配合 visibility 或 opacity，而非直接删掉元素或滥用 display —— 否则会破坏 Flex 的排列逻辑（比如影响 justify-content 或 flex-grow 计算）。
用 flex: 0 0 0 实现“视觉隐藏但保留位置流”
当希望子元素不显示、也不占用主轴空间（比如临时折叠一个 flex item），可设：
-
flex: 0 0 0—— 即flex-grow: 0、flex-shrink: 0、flex-basis: 0 - 再配合
overflow: hidden和height: 0（横向 flex 容器则用width: 0） - 注意：需确保该元素无边框、内边距、最小尺寸干扰，否则仍可能撑开空间
用 visibility: hidden + flex: 0 隐藏但保持占位
如果需要隐藏元素但让其他子项布局不变（即“占位但不可见”），推荐组合：
-
visibility: hidden—— 元素不可见，但仍参与文档流和 flex 计算 -
flex: 0 0 auto或显式设flex-basis: 0防止它意外拉伸 - 避免只用
opacity: 0，因为透明元素仍响应事件，且若父容器有overflow: hidden可能裁剪异常
用 display: none 要谨慎：Flex 容器会重排
display: none 确实能隐藏元素，但它会让 Flex 容器完全忽略该子项：
立即学习“前端免费学习笔记（深入）”；
- 所有
justify-content、align-items、gap会重新计算剩余子项 -
flex-grow比例会动态分配给其他可见项，可能导致布局跳变 - 适合真正“移除”场景（如权限控制、表单步骤切换），不适合平滑折叠/展开
进阶：结合 CSS 自定义属性做响应式开关
可通过自定义属性统一控制隐藏状态，便于 JS 切换或媒体查询适配：
.container {
--is-hidden: 0;
}
.item.hidden {
flex: calc(1 - var(--is-hidden)) 0 0;
visibility: var(--is-hidden) visible hidden;
}JS 中只需 el.classList.toggle('hidden') 或修改 style.setProperty('--is-hidden', '1')，语义清晰且易于维护。
