Flex容器高度塌陷导致内容上跳，因子项浮动或绝对定位使父容器高度为0，图片加载前无占位引发首屏抖动；应加display: flow-root、设aspect-ratio与min-width: 0等措施优化。
Flex容器高度塌陷导致内容上跳
Flex容器本身不触发BFC，如果子项全是浮动或绝对定位，父容器高度会塌成0，图片或文字加载前没占位，等资源就绪后突然撑开——这就是首屏“一抖”。常见于卡片列表、图文混排等场景。
- 给Flex容器加
display: flow-root（比overflow: hidden更干净，不裁剪阴影/下拉菜单） - 删掉
<img alt="CSS Flex布局如何避免页面加载时抖动？" >标签里的width和height属性（它们干扰响应式，现代浏览器已不靠它推宽高比） - 图片的直接父容器必须设
aspect-ratio+width: 100%，<img alt="CSS Flex布局如何避免页面加载时抖动？" >自身只写width: 100%; height: auto; - 若父容器是flex子项，务必加
min-width: 0（否则默认min-width: auto会压扁高度）
Flex子项尺寸不可预期引发连锁重排
Flex子项含未设宽高的图片、异步加载文本、或字体尚未就绪时，浏览器会先按“空内容”渲染，再重排——尤其在移动端，抖动更明显。
- 图片用
aspect-ratio预设比例，且确保其父容器满足三个条件：display: block（不能是inline）、width显式声明（如100%）、无height/max-height覆盖 - 文字内容用
font-display: optional或swap，避免FOIT导致布局反复调整 - 避免对子项用
flex: 1撑满未知高度容器；优先用flex: 0 0 auto或固定尺寸（如flex: 0 0 200px） - 图标+文字组合中，图标设
flex: 0 0 24px，文字设flex: 1 1 0，比全用flex: 1少一次文本度量
滚动中Flex容器动态变化触发抖动
在滚动监听里读写offsetWidth、getBoundingClientRect()再改flex-basis，会强制同步重排。尤其瀑布流、懒加载卡片列表最易中招。
- 所有读操作（如
clientWidth、getComputedStyle）集中到滚动回调外缓存 - 所有写操作（如改
style.flexBasis）批量执行，或用element.style.cssText = '...'一次性写入 - 用
requestAnimationFrame包裹写操作，确保与下一帧渲染对齐 - 列表项宽度需自适应时，用
flex: 1 1 max-content比flex: 1更稳，且避免文字换行抖动
嵌套Flex加剧计算开销与抖动风险
三层以上Flex嵌套时，Chrome Layout阶段耗时可能翻倍，低端设备卡顿明显。不是“用了Flex就稳”，而是嵌套让浏览器反复求解弹性系数。
立即学习“前端免费学习笔记（深入）”；
- 页头+主内容+页脚外层用Flex，内部左右分栏改用
margin或text-align，而非再套一层Flex - 按钮组对齐优先用
gap+display: inline-flex，别每个按钮都包div再设Flex - 表格类布局（如表单字段+提示文字）改用
display: grid，grid-template-columns: max-content 1fr比双层Flex稳定得多 - 绝对定位元素不要放在Flex容器里“占位”，它仍参与弹性计算；改用
position: absolute配合transform脱离文档流
display: flex，而是父容器偷偷加了height: 100%覆盖aspect-ratio，或者以为flex: 1能兜底，却忘了子项图片根本没预留空间。 
