flex对齐失效主因是父容器未撑满视口高度，需用height: 100dvh并清除body默认margin；动画卡顿源于flex项尺寸动态计算，应设flex: 0 0 100vw且仅用transform/opacity动画；safari错位需换100dvh并隐藏滚动条；flex-wrap网格错乱则因未固定项尺寸，须用calc()配合gap和align-content。
flex容器的justify-content和align-items为什么总不生效
全屏幻灯片里设了display: flex，但justify-content: center和align-items: center没让内容居中——大概率是父容器没撑满视口高度。Flex对齐只作用于其直接子元素，且依赖父容器有明确尺寸。
- 确保幻灯片根容器设了
height: 100vh（不是100%），否则高度塌陷，flex对齐失去参照 - 避免父级存在
overflow: hidden或transform（如scale(1)），这些会创建新的BFC，干扰flex主轴计算 - 如果用
body作flex容器，记得清除默认margin：body { margin: 0; }
slide切换时用flex过渡动画卡顿或跳变
想用transform: translateX()配合flex布局做滑动，但动画不顺、首帧闪动——问题常出在flex项的尺寸动态计算与CSS动画触发时机冲突上。
- 给每个slide项显式设置
flex: 0 0 100vw，禁用flex缩放，避免浏览器在动画中反复重排 - 动画属性只用
transform和opacity，别动left/width等触发布局的属性 - 加
will-change: transform到正在动画的slide元素上，提前提示合成层提升（但别滥用，仅限当前活跃项）
移动端Safari下flex全屏幻灯片错位或滚动条残留
Safari（尤其iOS 15+）对100vh处理特殊：地址栏收起/展开时会触发视口高度变化，但flex容器不会自动重算，导致内容偏移或底部留白。
- 不用
100vh，改用100dvh（dynamic viewport height），它随地址栏状态实时更新 - 降级方案：监听
resize事件，用document.documentElement.clientHeight动态更新容器高度 - 强制隐藏滚动条：
html, body { overflow: hidden; }，否则Safari可能因内容微超而激活滚动，破坏全屏感
用flex-wrap实现多行幻灯片网格时换行错乱
想在一个容器里放多个slide缩略图，用flex-wrap: wrap排成网格，结果每行数量不稳定、最后一行塌陷——根本原因是flex项未设固定宽高，且flex-basis受父容器宽度和内容影响过大。
立即学习“前端免费学习笔记（深入）”；
- 给每个缩略图项设
flex: 0 0 calc(33.333% - 8px)（三列带间隙），用calc()锁定基础尺寸 - 间隙用
gap而非margin，避免margin折叠或flex项误判可用空间 - 父容器加
align-content: flex-start，防止多行时默认拉伸导致行高异常
flex的对齐和动画本身不难，难的是它和视口单位、浏览器渲染机制、移动端交互反馈这几层耦合在一起——漏掉其中任意一层，比如忘了100dvh或will-change的适用边界，就容易在某个机型或操作路径下突然失效
