Flex容器居中失效的根本原因是父容器高度塌陷，需显式设置html、body及root容器高度（如height: 100%或min-height: 100vh），否则align-items: center因交叉轴无可用空间而无法生效。
React 18中Flex容器高度未设导致居中漂移
React 18用createRoot挂载后，body默认高度仍是内容高，不是视口高。写justify-content: center; align-items: center却没效果，或缩放时内容突然上移——根本原因是父容器（常是div#root）没显式高度约束。
- 必须给
html和body加height: 100%，否则align-items: center无交叉轴参考 -
min-height: 100vh比height: 100vh更稳，尤其防 iOS Safari 地址栏收放抖动 - 若用 CSS-in-JS（如 Emotion），别只靠 className；在根组件里用
useLayoutEffect动态设document.documentElement.style.height
悬停边框引发Flex子项重排
给 Flex 项目（如按钮）加:hover { border: 2px solid #007bff }，会导致整个容器重排：边框增加尺寸 → Flex 重新计算主轴剩余空间 → 兄弟元素位置跳动。
- 预设透明边框：
border: 2px solid transparent，悬停只改border-color - 用
outline替代border（但注意outline不占布局空间，且无法圆角） - 若必须动态加边框，用
transform: scale(1.02)模拟“放大感”，避免触发布局
React状态更新触发Flex内联样式重计算
在 JSX 里写style={{ display: 'flex', justifyContent: isMobile ? 'center' : 'space-between' }}，每次isMobile变化，浏览器都得丢弃旧内联样式、解析新字符串、重走 CSSOM → 强制重排。
Reactivation Specialist · 流失召回
下载
适用于用户提出以下需求时：“构建赢回活动（win-back campaign）”、“重新激活已流失订阅者（re-engage lapsed subscribers）”、“执行重新授权 / 重新同意（re-permission / re-consent）清理”或“清理无效联系人列表（sunset my dead list）”；输出一个闭环式再激活方案——包括：流失用户群组（lapsed-cohort）定义、分阶段优惠阶梯（staged offer ladder）、重新授权（re-consent / re-p
- 改用语义化类名：
className={`flex-container ${isMobile ? 'justify-center' : 'justify-space-between'}`} - 避免在
style里写flexGrow、flexBasis等值；这些属性浏览器本可硬件加速，内联写法直接绕过 - 调试时打开 Chrome DevTools 的“Layout Shift Regions”，能直观看到哪些 Flex 项在抖
图片加载未设宽高引发Flex连锁重排
卡片列表用 Flex 布局，但图片没设width/height或aspect-ratio，加载前高度为 0 → Flex 容器收缩 → 加载后撑开 → 触发整行重排 → 滚动卡顿明显。
立即学习“前端免费学习笔记（深入）”；
- 所有
<img alt="CSS Flex在React 18页面中如何避免布局抖动？" >必须带width和height属性（即使只是占位值），或用aspect-ratio: 16/9 - React 中用
onLoad回调动态设style.flexBasis？别这么做——读写混用会强制同步布局。先缓存图片尺寸，再批量写 - 服务端渲染（SSR）场景下，提前注入图片尺寸到
data-属性，首屏就用 CSS 变量锁定宽高
