会，而且是强制同步重排；子项设 display: none 后从 flex 子项列表中彻底消失，justify-content、flex-grow、gap 等均立即重新计算，50+ 项频繁切换会导致肉眼可见跳动或卡顿。
Flex子项在媒体查询里用display: none会重排吗
会，而且是强制同步重排。只要某个子项设了 display: none，它就从 Flex 容器的子项列表中彻底消失，justify-content、flex-grow 分配、gap 计算都会立刻重新触发。50+ 子项频繁切换时，肉眼可见“跳一下”或滚动卡顿。
这不是 bug，是规范行为。别指望靠加 transition 消掉——display 本身不可过渡。
- 想避免重排？改用
visibility: hidden+flex: 0 0 auto，但得接受它仍占位 - 真要“不占位 + 不重排”？目前没有纯 CSS 解法，JS 层过滤数据再渲染 DOM 更稳
- 如果只是小屏收起一个侧边栏，重排影响不大，
display: none仍是首选
@media 中写 display: none 失效的常见原因
不是代码没生效，大概率是被更高优先级规则盖掉了。比如全局写了 .nav-item { display: flex !important; }，媒体查询里只写 .nav-item { display: none; } 就无效。
- 检查开发者工具里该元素最终计算出的
display值，看哪条规则胜出 - 媒体查询内提升选择器权重：用
.mobile-layout .nav-item替代单纯.nav-item - 避免在多个断点里反复切同一元素，比如
max-width: 768px设none，max-width: 480px又设回block，加载顺序一乱就露馅 - 确认父容器没设
display: contents或display: none，否则子项再怎么设都白搭
Flex容器下隐藏特定序号子项（如第2个）的写法
直接用伪类最干净，但要注意：Flex 容器里的子项序号是按 DOM 顺序算的，不是按视觉顺序（比如用了 order 属性后，:nth-child(2) 还是指第二个 HTML 元素）。
@media (max-width: 768px) {
.container > :nth-child(2) {
display: none;
}
}
- 用
>确保只命中直接子项，防误伤嵌套结构 - 如果目标子项有 class（比如
.ad-banner），优先用类名而非序号，语义更强、维护更稳 - IE11 不支持
:nth-child()在 Flex 容器中的某些组合，如需兼容，换用 class 控制
隐藏后要不要清空 margin/gap 影响
不用。Flex 容器的 gap 是作用于“相邻可见子项之间”的，一旦子项 display: none，它前后的 gap 自动消失，不需要手动设 margin: 0。
但如果你用的是老式 margin 模拟 gap（比如每个子项设 margin-right: 1rem），那就要额外处理：隐藏时得同时清除该子项的 margin，否则空白还在。
- 现代项目请统一用
gap，省心且语义清晰 - 若必须用 margin，建议隐藏时加个 class：
.hidden-with-margin { display: none; margin: 0 !important; } - 注意：
gap在 Safari 旧版本中需加-webkit-gap前缀
display: none，而是判断「这个隐藏到底要不要让布局重排」。很多抖动问题，根源不在 CSS 写法，而在一开始就没想清楚：你是要“移除”，还是“藏起来但留位置”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
