Flex布局卡顿源于滥用：三层以上嵌套、flex: 1泛滥、align-items: stretch深层乱用；应扁平结构、固定尺寸、显式flex-basis，并用contain隔离重排影响。
Flex布局本身不慢，慢的是滥用方式——三层以上嵌套、flex: 1泛滥、align-items: stretch在深层结构里乱用，这些会直接让Chrome Layout阶段突破16ms/frame，滚动卡顿肉眼可见。
为什么三层以上Flex嵌套会卡顿
浏览器对每层display: flex容器都要单独跑一次主轴+交叉轴布局遍历。三层嵌套不是“多一点点开销”，而是Layout耗时常翻倍，尤其在列表动态插入或滚动时，layout thrashing报警频发。
- 典型坏结构：
.list→.item→.content→.avatar，其中.content只是个空div包着文字，却设了display: flex - 替代方案：把中间层改成普通
<div>，用gap或margin控制间距；图标用flex: 0 0 24px，文字用flex: 1 1 0 - 验证方法：Chrome DevTools → Rendering → 勾选
Layout Shift Regions，扁平化后高亮区域明显收缩
别让flex: 1成为性能黑洞
flex: 1看着省事，实际是flex: 1 1 0，意味着所有空间从零开始分配，浏览器必须反复测量内容再重算，大数据量列表里它就是重排引擎。
- 固定尺寸优先：头像、图标等明确宽高的元素，直接写
flex: 0 0 32px，跳过弹性计算 - 避免
flex: 1混用width: auto——后者会让flex-basis退化为auto，触发额外内容度量 - 需要自适应宽度时，用
flex: 1 1 max-content比flex: 1更稳，能防文字换行抖动
align-items: stretch在深层结构里特别危险
这个默认值会让子项强制拉伸并重新测量高度，一旦嵌套两层以上flex容器，就容易引发连锁重排：父stretch → 子重测 → 子内flex再stretch → 再重测……
立即学习“前端免费学习笔记（深入）”；
- 常见场景：卡片组件用
flex-direction: column包裹标题+描述+按钮，外层又没关align-items: stretch - 解法：对固定高度区域（如头像）显式设
align-self: flex-start；对需撑满的区域，改用min-height或aspect-ratio，避开stretch的测量逻辑 - iOS Safari 12–14对此缓存失效更严重，下拉刷新后可能直接卡死
用contain: layout style paint隔离影响范围
它告诉浏览器：“这个元素内部怎么变，都不会影响外面”，能大幅压缩重排扩散范围——但只对flex容器的**直接子项**有效。
- 加在卡片级元素上（比如
.card），而不是容器本身或动画元素上 - 适用场景：弹窗内容区、独立语义块、尺寸稳定的列表项
- 兼容性：Chrome 52+、Firefox 69+、Safari 15.4+；IE完全不支持，不过IE本就不该跑大数据量Flex列表
真正卡顿的从来不是Flex本身，而是没意识到它是一维布局模型——想靠层层嵌套解决二维问题，只会把浏览器拖进重排泥潭。扁平结构、固定尺寸、显式flex-basis，这三件事做扎实了，性能问题基本就清掉了。
