必须显式设置 display: flex 才能启用 Flex 布局；align-items 是父容器属性，仅在 display: flex/inline-flex 下生效，控制交叉轴对齐，主轴对齐需用 justify-content。
flex 容器必须显式声明 display: flex
很多人写了 flex 和 align-items 却没效果，根本原因是父容器没设 display: flex。CSS 中 flex 本身不是属性，而是 flex-grow、flex-shrink、flex-basis 的简写；真正开启弹性布局的是 display 值。
-
flex是子元素的属性（用于控制单个子项如何伸缩），不能单独让父容器变成 Flex 容器 -
align-items是父容器的属性，只在display: flex或display: inline-flex下生效 - 漏写
display: flex时，align-items完全被忽略，浏览器不报错也不提示
align-items 控制的是交叉轴对齐，不是主轴
初学者常误以为 align-items: center 能让子元素水平居中——其实它只管“垂直方向”（交叉轴）对齐。主轴方向（默认是水平）的对齐要用 justify-content。
- 当
flex-direction: row（默认）：主轴是水平，交叉轴是垂直 →align-items控制上下对齐 - 当
flex-direction: column：主轴是垂直，交叉轴是水平 →align-items控制左右对齐 -
align-items: stretch是默认值，会让子项拉满交叉轴高度/宽度，常导致意外撑高
flex 子项的 flex 属性会覆盖 align-items 的部分效果
如果某个子项设置了 align-self，它会直接覆盖父容器的 align-items；而 flex 简写（如 flex: 1）隐含了 flex-basis: 0，可能让子项高度坍缩，导致 align-items: center 看不出效果。
-
flex: 1等价于flex: 1 1 0，其中flex-basis: 0意味着“不参考自身内容尺寸”，容易让子项高度为 0 - 若子项是空 div 或只有行内文本，又没设
min-height或height，align-items: center就没参照物可居中 - 想保留内容自然高度，改用
flex: 1 1 auto或显式写flex-basis: auto
.container {
display: flex;
align-items: center; /* 垂直居中（row 方向） */
justify-content: center; /* 水平居中（主轴） */
}
.item {
flex: 1 1 auto; /* 避免 flex-basis: 0 导致高度丢失 */
padding: 1rem;
}移动端或嵌套 Flex 中 align-items 可能被继承干扰
align-items 不继承，但嵌套多层 Flex 容器时，外层的 align-items 对内层容器本身无效，只影响它的位置；而内层容器若也设了 display: flex，它的 align-items 才作用于自己的子项。这种层级关系容易理错。
立即学习“前端免费学习笔记（深入）”；
- 外层
align-items: flex-start只决定“内层容器这个盒子”在交叉轴上的起始位置，不影响内层容器内部子项的对齐 - 如果忘了给内层容器再设
align-items，里面的文字或图标就不会按预期居中 - 调试时可用浏览器开发者工具逐层检查 computed 样式，确认
align-items是否真正应用到了目标容器上
实际写的时候，最常卡住的不是语法，而是没意识到 align-items 的作用域仅限于「当前 flex 容器的直接子项」，且高度依赖父容器是否真正进入了 flex 上下文。
