display: none会闪一下是因为它必然触发强制同步重排，浏览器需立即重新计算剩余子项的尺寸、间距和对齐方式，尤其在导航项多且频繁切换时，低端设备上肉眼可见抖动或卡顿。
flex容器里导航项放不下时，为什么display: none会闪一下？
因为display: none会强制触发同步重排（reflow），浏览器必须立刻重新计算所有剩余子项的尺寸、间距和对齐方式。尤其当导航项超过10个、且频繁切换显隐时，这种重排在低端设备上肉眼可见——比如点击筛选后菜单“抖一下”或滚动卡顿。
常见错误是：用JS控制display: none隐藏某几个.nav-item，但没意识到这会让整个.nav-list布局重算。更糟的是，如果父容器用了flex-wrap: wrap，隐藏一项可能让原本折行的项突然挤回单行，视觉跳变更明显。
- 别在交互高频场景（如搜索过滤）中反复切
display: none - 若只需视觉隐藏且保持交互能力（比如保留键盘焦点），改用
visibility: hidden+position: absolute+left: -9999px - 确保父容器没设
overflow: hidden，否则left: -9999px会被裁掉
想整项隐藏又不重排，但又不能占位，怎么办？
纯CSS做不到“不重排 + 不占位 + 可交互”三者兼得。visibility: hidden不重排但占位；display: none不占位但必重排；opacity: 0和flex: 0 0 0都不真正移出文档流。
真正可行的路径是：把隐藏逻辑从CSS层上移到JS层——不是靠样式开关，而是动态删/增DOM节点。
- 用
Array.filter()筛出要显示的导航项数据 - 用
innerHTML或DocumentFragment一次性渲染，避免逐个removeChild - 如果必须保状态（比如已展开的子菜单），给每个
.nav-item加data-id，渲染前比对并恢复
用overflow: hidden硬裁剪，但第一个标签就溢出怎么办？
直接给.nav-list设overflow: hidden只能裁掉超出部分，不会整项隐藏。比如一个超宽的.nav-item，文字被截断，但盒子本身还在，还占着高度和间隙。
解决思路是“让它换行，再藏掉”——利用Flex的换行机制间接实现整项隐藏。
- 在
.nav-list开头插入一个<span class="placeholder"></span>，宽高均为0 - 给
.nav-item加flex-shrink: 0，防止被压缩 - 设
.nav-list { flex-wrap: wrap; overflow: hidden; } - 关键：给
.placeholder设flex: 0 0 1px，它会抢占第一行第一个位置，逼后续所有.nav-item换行——而换行后的项正好被overflow: hidden裁掉
flex-shrink: 0设了还是被压扁？检查这三处
flex-shrink: 0不是“防压缩保险丝”，它只在父容器有收缩空间时才生效。很多情况下它失效，是因为前提条件根本没满足。
- 父容器没设
width或max-width——Flex项再怎么“不缩”，也会跟着内容撑开 - 兄弟项用了
flex-grow: 1，抢光所有剩余空间，你的项被挤到最小内容宽（看起来像被压缩，其实是被挤） - 父容器设了
flex-wrap: wrap——一旦换行，收缩逻辑就停了，flex-shrink完全不触发
真正要隐藏溢出，得配齐三样：flex-shrink: 0 + overflow: hidden + white-space: nowrap（文本）或min-width: 0（图片/块级）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
