17370845950

必须显式设置 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 上下文。