Flex项中禁用calc()动态计算以避免多次重排，优先用固定值、CSS变量或minmax()/fr；慎用flex-grow/shrink组合，固定尺寸优先；避免强制同步布局读取；Flex容器宜扁平化，复杂场景改用Grid。
flex项里别用calc()做动态尺寸计算
浏览器在每次布局（layout）阶段都要重新求值calc()，而flex容器的主轴/交叉轴尺寸依赖子项的最终尺寸，这就触发了多次重排。尤其当calc()里含vw、em或自定义属性时，计算链更长，性能下降明显。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把
calc(100% - 20px)这类表达式提前算好，用固定值或CSS变量代替（如--item-width: 320px） - 若必须响应式，优先用
minmax()+fr单位替代，比如grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))比flex+calc更轻量 - 避免在
:hover或@media中动态切换含calc()的flex-basis，这会强制同步重排
慎用flex-grow和flex-shrink组合
当多个子项同时设flex-grow: 1且内容高度不一致时，浏览器需反复测量、分配剩余空间，尤其在滚动或动画中容易卡顿。更糟的是flex-shrink: 0混用width: auto，可能引发隐式重排。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 固定宽高优先：对卡片、头像等可控元素，直接设
width/height，关闭flex-shrink - 单向伸缩：只用
flex-grow或只用flex-shrink，避免双向拉扯；需要弹性填充时，用flex: 1（即flex: 1 1 0）比flex: 1 1 auto更稳定 - 避免在
flex简写中漏掉第三个参数，flex: 1默认是flex-basis: 0%，但flex: 1 1会退化为flex-basis: auto，后者触发内容测量
避免在flex-item上触发强制同步布局
读取offsetWidth、getComputedStyle(el).height等属性，会迫使浏览器立刻完成当前帧的布局计算，打断flex的异步布局优化。在requestAnimationFrame回调里频繁读取，等于给渲染管线“踩刹车”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有尺寸读取操作集中到一次
getBoundingClientRect()调用，不要拆成offsetWidth+offsetHeight - 用
ResizeObserver替代scroll或resize事件监听尺寸变化，它天然批处理 - 如果必须在JS里控制flex行为（比如按行数截断），改用CSS方案：
display: -webkit-box+-webkit-line-clamp，不触发布局
Flex容器本身别套复杂嵌套或filter/transform
transform: translateZ(0)或filter: blur(1px)会让flex容器升层为合成层，但子项仍可能因内容重绘导致层合并失败；更麻烦的是，多层flex嵌套（比如flex > flex > div）会让浏览器难以复用布局缓存，每次更新都从根开始重算。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- flex容器层级尽量扁平，超过两层嵌套时，考虑用
grid替代内层flex（grid的布局算法更可预测） - 避免对flex容器加
will-change: transform，除非真有持续动画；它会让子项失去布局优化机会 - 用
contain: layout style paint显式隔离容器，但注意contain: layout会禁用margin-collapse，需手动补margin
最常被忽略的是：flex的“弹性”本质是运行时计算，不是声明式约束。哪怕只改一个flex-basis，也可能让整行重排——所以别把它当CSS Grid用，该用Grid的地方，就别硬套Flex。
