先记住这个答案
align-items 作用在交叉轴上，而交叉轴的方向取决于 flex-direction。默认 row 时交叉轴是垂直的，align-items: center 让子项垂直居中。改成 column 后交叉轴变成水平的，align-items: center 就让子项水平居中了。记住一个原则：justify 系列跟着主轴走，align 系列跟着交叉轴走，方向永远由 flex-direction 决定。
align-items始终管交叉轴column下交叉轴是水平方向center此时让子项水平居中- 垂直方向用
justify-content
row 和 column 下的对齐方向对比
很多人习惯把 align-items 理解成「垂直对齐」，但这只在 flex-direction: row 时成立。一旦改成 column，所有轴的方向都翻转了。
/* row 模式：align-items 控制垂直方向 */
.row-container {
display: flex;
flex-direction: row;
align-items: center; /* 子项垂直居中 */
justify-content: center; /* 子项水平居中 */
height: 200px;
}
/* column 模式：align-items 控制水平方向 */
.col-container {
display: flex;
flex-direction: column;
align-items: center; /* 子项水平居中 */
justify-content: center; /* 子项垂直居中 */
height: 200px;
}同样的 align-items: center，在 row 模式下让子项上下居中，在 column 模式下让子项左右居中。justify-content 也是一样的道理，方向反过来了。
一个常见的居中布局场景
column 模式最常用的场景是让内容垂直排列（比如标题在上、内容在下），同时要让这些内容在水平方向居中。
这时候写 flex-direction: column 加 align-items: center 就行了。子项按照从上到下的顺序排列，每个子项在水平方向居中。如果还想垂直居中整体，再加 justify-content: center。
这比用 margin: 0 auto 更灵活，因为 margin: auto 要求子项有明确宽度，而 align-items: center 不需要。
容易答错的地方
- 说
align-items永远管垂直方向 - 这是最常见的误解。
align-items管的是交叉轴，不是垂直方向。交叉轴的方向随flex-direction变化。面试时如果直接说「align-items管垂直对齐」，面试官会追问「column模式下呢」。 column下搞反justify-content和align-itemscolumn下想让子项垂直居中，应该用justify-content: center（主轴是垂直的）。很多人凭直觉写align-items: center，结果变成了水平居中。
面试官还会怎么问？
flex-direction: column-reverse 下 align-items 的方向会变吗？
不会变。column-reverse 只是让子项的排列顺序反过来（从下到上），交叉轴仍然是水平方向。align-items: center 依然让子项水平居中。
row 下想让某一个子项在垂直方向单独对齐怎么办？
给那个子项设 align-self。比如容器 align-items: flex-start 让所有子项靠上对齐，某个子项写 align-self: flex-end 就能单独靠下。
writing-mode 会影响轴的方向吗？
会。writing-mode: vertical-rl 会让文档流变成垂直方向，这时 flex-direction: row 的主轴也变成了垂直。但这种场景在面试里很少考，了解即可。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。