Flex 本身不直接导致 CLS，但用法不当会引发布局偏移；需通过设置 min-height、aspect-ratio、font override 和 flex-shrink: 0 四点协同控制尺寸预期，防止图片加载、字体就绪等时机引发抖动。
Flex 本身不直接导致 CLS（累计布局偏移），但用法不当会让图片、文字、字体加载时“突然撑开”容器，从而触发偏移——关键不是删掉 Flex，而是提前锁定尺寸、隔离动态内容、切断重排链路。
Flex 容器没设 min-height 就容易抖
Flex 容器若只写 display: flex 而没给高度约束，子项一加载（比如图片还没宽高、字体还没就绪），容器就会反复收缩/扩张，旁边所有 Flex 项跟着跳。这不是 Flex 的错，是你没告诉它“至少该多高”。
- 对卡片、列表项等固定视觉高度的容器，直接设
min-height: 240px或min-height: 30vh（注意不是height） - 如果高度需响应式变化，用
min-height: minmax(240px, 30vh)，避免小屏下过高、大屏下过低 - 别依赖
flex: 1去“撑满”父容器高度——父容器自身若没min-height，flex: 1反而放大抖动
图片没宽高或 aspect-ratio 是最大雷区
Flex 里放 <img> 且没设 width/height 或 aspect-ratio，加载前高度为 0，加载后瞬间撑开整行，CLS 直接爆表。背景图方案更稳，但得注意语义缺失。
- 首选：给
<img>加原生属性width和height，再配object-fit: cover - 次选：用
aspect-ratio: 4 / 3+overflow: hidden锁定容器比例，img填满即可 - 视觉优化可换
background-image，但必须加min-height（不能只靠 padding-top 伪元素） - 关键图文内容仍需保留
<img>+alt，背景图仅作视觉兜底
字体加载抖动会偷偷拉偏 Flex 项对齐
font-display: swap 让字快出来，但 fallback 字体和自定义字体的基线、ascent 高度不同，Flex 的 align-items: center 会“算错位置”，标题或图标轻微右移/上浮，CLS 累积超标。
立即学习“前端免费学习笔记（深入）”；
- 打开 Chrome DevTools → Elements → Computed，对比 fallback 和 Web 字体的
ascent、descent - 在
@font-face中补全三参数：ascent-override、descent-override、line-gap-override，值用百分比（如ascent-override: calc(920 / 850 * 100%)） - 必须加
<link rel="preload" as="font">，否则字体未进缓存，override 不生效 - 字号用
rem或px，慎用em（会继承父级缩放，加剧度量偏差）
别让 flex-shrink 暗中压缩固定尺寸元素
Flex 子项默认 flex-shrink: 1，移动端宽度一收窄，图标、按钮、头像就被压扁，导致文字换行、图标变形、间距突变——这不是布局偏移，是“错位引发的二次偏移”。
- 对固定尺寸项（如
<button>、图标、徽标），显式设flex-shrink: 0 - 搭配
min-width使用更保险，例如min-width: 44px（满足触控最小区域） - 用
flex: 0 0 auto替代单独写flex-shrink: 0，语义更清晰 - 避免全局重置
* { flex-shrink: 0 }，会破坏正常流式行为
真正难的不是某一行 CSS 写对，而是在图片加载、字体就绪、视口变化多个时机下，始终让 Flex 容器有确定的尺寸预期——min-height、aspect-ratio、font override、flex-shrink: 0 这四点必须同时落地，漏一个，CLS 就可能从 0.05 跳到 0.25。
