Flex容器滚动卡顿主因是浏览器对flex-wrap布局的O(n²)算法复杂度，子元素超200个时重排耗时骤增；可用content-visibility: auto（配contain-intrinsic-size）、优化flex-basis、或改用Grid/绝对定位缓解。
Flex容器内子元素过多时，为什么滚动变卡？
因为浏览器在每次重排（reflow）时，要重新计算所有 flex-item 的尺寸、顺序、对齐方式和换行位置。子元素超过 200 个后，这个过程会从毫秒级跳到几十毫秒，尤其在低端设备或嵌套 Flex 中更明显。
- 不是 Flex 本身慢，是浏览器实现中对
flex-direction: row+flex-wrap: wrap的布局算法复杂度接近 O(n²) - Chrome DevTools 的“Rendering”面板勾选 “Paint flashing” 和 “Layout Shift Regions”，能直观看到哪些区域频繁重排
- 用
getComputedStyle(el).display确认元素真被解析为flex，避免因父级display: contents或 CSS-in-JS 注入顺序导致意外 fallback 到 block
用 content-visibility: auto 隔离不可见区域
这是目前最轻量、兼容性可接受（Chrome 85+，Edge 88+，Firefox 99+）的方案：让浏览器跳过不可见 flex item 的布局计算，而不是靠 JS 手动 detach/append。
- 只对设置了固定高度/最大高度的 flex 容器生效；
height: auto或min-height: fit-content会让content-visibility: auto退化 - 必须配合
contain-intrinsic-size: 40px（按单个 item 高度预估），否则首次渲染仍会触发全量 layout - 不要用在有
position: sticky子项的容器上——sticky 元素会强制整个容器参与 layout
/* 示例：适用于垂直滚动的 flex 列表 */
.container {
display: flex;
flex-direction: column;
height: 500px;
overflow-y: auto;
}
.item {
content-visibility: auto;
contain-intrinsic-size: 48px;
}
flex-basis 写成 0 还是 auto？影响重排开销
写死 flex-basis 能让浏览器跳过部分子项的自然尺寸测量，尤其当子项含图片、字体或异步加载内容时。
-
flex: 1 1 0比flex: 1 1 auto更快——前者直接按剩余空间均分，后者要先 layout 每个子项再回退调整 - 但若子项内有
min-width或文本强制换行，flex-basis: 0可能导致内容被压缩甚至截断，需同步加min-width: min-content - 横向 flex 容器中慎用
flex-basis: 0：遇到中文/emoji 等不定宽字符时，可能引发意外交互错位
什么时候该放弃 Flex，改用 display: grid 或纯 position？
Flex 不是万能布局引擎。当容器内子项结构稳定、行列关系明确，且你控制得了数量上限时，grid 的 layout 计算路径更短。
立即学习“前端免费学习笔记（深入）”；
- Grid 在
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))这类场景下，重排耗时比等效的flex-wrap低 30%~50% - 如果只是做「左对齐 + 自动折行」的卡片列表，且卡片高度一致，用
float或position: absolute+ JS 定位反而最稳——完全绕过 flex layout 引擎 - 注意 Safari 对
grid的subgrid支持仍不完整，别在需要跨多层嵌套对齐的场景里强上
真正难处理的是那些“看似静态实则动态插入”的 Flex 容器——比如聊天窗口里不断 append 的消息气泡。这时候光调参数没用，得结合虚拟滚动切片 + content-visibility + 显式 flex-basis 三者锁死，少一个都容易在 iOS 上掉帧。
