align-items 仅在单行 flex 容器中控制交叉轴对齐；多行时需用 align-content 跨行对齐，且父容器交叉轴必须有明确高度，否则居中无效。
align-items 只对多行 flex 容器无效？
不是“无效”，是它根本不起作用——align-items 仅在单行 flex 容器（即 flex-wrap: nowrap）中控制交叉轴对齐；一旦启用 flex-wrap: wrap，每行变成独立的“行盒”，align-items 就只影响该行内元素的对齐，无法跨行对齐。
常见错误现象：align-items: center 写了但多行子项上下参差不齐，尤其当各行子项高度不一致时。
- 真正跨行垂直居中，得用
align-content（控制行与行之间的对齐） -
align-items和align-content同时存在时互不干扰：前者管“行内”，后者管“行间” - 如果只有一行且设了
flex-wrap: wrap，align-content也不生效（没第二行可对齐）
align-items: center 在单行 flex 中为啥有时不居中？
表面写了 align-items: center，但子元素视觉上仍贴顶或偏移，大概率是父容器没撑开交叉轴高度，或者子元素自身有 margin / vertical-align 干扰。
- 父容器交叉轴（比如 column 布局下的 height，row 布局下的 height）必须有明确尺寸，否则按内容收缩，
center就失去参照 - 子元素若为
inline或inline-block，其vertical-align会和align-items冲突，建议统一设为display: block - 检查是否有未重置的
margin（尤其是margin-bottom），它会拉低整体基线
示例：父容器 height: 200px + display: flex + align-items: center，子项才可能真正在中间；否则只是“在内容高度范围内居中”，而内容高度可能只有 24px。
立即学习“前端免费学习笔记（深入）”；
align-items 和 justify-content 混用时的常见错位
justify-content 控制主轴（默认水平），align-items 控制交叉轴（默认垂直），但很多人误以为它们总是一起“居中整个容器”，其实方向依赖 flex-direction。
- 当
flex-direction: column时，justify-content变成垂直方向，align-items变成水平方向 - 写死
justify-content: center; align-items: center而不确认flex-direction，容易导致“想水平居中却调了垂直” - 某些 ui 库（如 Ant Design 的
Flex组件）默认改了flex-direction，此时直接套用老习惯会出错
IE11 下 align-items 行为异常怎么办？
IE11 对 align-items 支持不完整：不支持 stretch（默认值）在某些嵌套场景下的计算，且 baseline 几乎不可靠。
- 避免在 IE11 中依赖
align-items: stretch让子项填满高度，改用显式height: 100%或min-height -
align-items: center在 IE11 中需确保父容器有height，且子项不能是table-cell或含Float - 如果必须兼容，可用
display: -ms-flexbox+-ms-flex-align: center作为降级，但注意语法差异（无短横线）
最麻烦的点其实是：IE11 不报错，只是静默失效。上线前务必在真实环境中测交叉轴对齐，别信 DevTools 里的渲染预览。