css弹性盒布局属性_flex与align-items的联合使用_技术教程

必须显式设置 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;
}