Flex布局抖动主因是内容加载、尺寸未锁定与flex-shrink失控三者叠加，尤其窄屏下无min-height、未禁用flex-shrink及图片/字体未就绪时引发反复重排。
Flex 布局本身不会因“内容多”抖动，抖动真正来源是内容加载、尺寸未锁定、弹性计算失控这三者叠加——尤其在移动端窄屏下，flex-shrink 默认启用 + 图片/字体未就绪 + 容器无最小约束，会引发反复重排。
为什么 flex 容器里内容一多就跳？
不是内容多导致抖，而是浏览器在每次内容变化（图片加载、文字回流、字体替换）时，都要重新跑一遍 flex 布局算法：算 flex-basis、分剩余空间、判断是否 shrink、再测交叉轴对齐……这个过程若缺乏尺寸锚点，就会来回震荡。
- 常见现象：
flex: 1的卡片区域，加载前高度为 0，图片进来后突然撑开，下方所有元素下移；或者文字换行导致按钮被压扁，触发二次重排 - 关键诱因：父容器没设
min-height，子项又没锁aspect-ratio或width/height，flex-shrink: 1在窄屏下强行压缩固定尺寸元素（如图标、徽标） - 嵌套越深越明显：三层以上 flex 嵌套时，一次图片加载可能触发 3–5 次 layout pass，Chrome DevTools 的 “Layout” 时间常飙到 20ms+（超 60fps 阈值）
必须显式关闭 flex-shrink 对固定元素的影响
flex-shrink: 1 是默认值，它让所有子项在空间不足时“自愿被压”，但图标、头像、按钮这些视觉上不能变形的元素，不该参与弹性收缩——否则它们一缩，文字就换行，容器高度突变，抖动立刻出现。
- 对明确尺寸的元素（如
<button>、<img width="48" height="48">），直接写flex: none或flex: 0 0 auto - 别只写
flex-shrink: 0：它只关收缩，不关伸展，仍可能被flex-grow拉宽；flex: none才彻底脱离弹性计算 - 检查 computed 样式里的
flex-shrink值——很多组件库（如 Element Plus）默认没覆盖，得你自己加
用 min-width: 0 + aspect-ratio 解锁 flex-basis 的真实作用
很多人想靠 flex-basis: 280px 卡死宽度，但在移动端它反而加剧抖动：窄屏下溢出、宽屏下留白。真正该预设的是比例性尺寸，而 aspect-ratio 必须配合 min-width: 0 才生效——否则浏览器按旧规则把 min-width: auto 当成硬约束，直接忽略宽高比。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
.card { flex: 0 0 auto; min-width: 0; min-height: 0; width: 100%; aspect-ratio: 4 / 3; } - API 返回图片尺寸不确定？别硬写死
aspect-ratio，改用min-width: 240px+max-width: 100%+object-fit: cover，让容器有底线、有上限、不拉伸 - 背景图方案更稳：
background-image不触发重排，但必须配min-height（不能只靠padding-top），且语义图文仍需保留<img>+alt
滚动区域里 flex 列表的防抖底线设置
长列表用 flex 布局时，用户快速滚动中插入新卡片或图片加载，极易触发 layout thrashing。此时光靠 CSS 不够，得从容器约束和 JS 读写两头控。
- 滚动容器（如
.list-wrapper）必须设min-height或height，禁止只写display: flex; flex-direction: column;就完事 - JS 动态添加卡片前，先缓存父容器
clientHeight和所有已渲染项的offsetHeight，避免循环中混用offsetTop和style.flexBasis - 用
contain: layout style paint给每个卡片加隔离——现代浏览器下，单个卡片重排不会扩散到整列 - 慎用
align-items: stretch：它会让子项强制拉伸并重测内容高度，在长列表中容易引发连锁重排
最易被忽略的一点：抖动往往不是来自 Flex 本身，而是你忘了给它的父容器设 min-height，又没关掉子项的 flex-shrink，还任由图片在无宽高属性下加载——这三件事凑一起，等于主动邀请浏览器反复重排。锁住尺寸、切断收缩、隔离子树，抖动自然停。
