弹性盒子子元素对齐不生效，主因是父容器未启用Flex布局或混淆主轴/交叉轴——align-items仅控制交叉轴对齐，水平居中需用justify-content；还需排查align-self覆盖、margin干扰及父容器高度缺失等问题。
弹性盒子（Flexbox）中子元素对齐不生效，最常见的原因是父容器未正确启用 Flex 布局，或 align-items 与 align-self 的作用方向被误解——它们只控制**交叉轴**（cross axis）对齐，而非主轴（main axis）。
确认父容器已启用 Flex 布局
align-items 是父容器的属性，只有当父元素设置了 display: flex 或 display: inline-flex 时才生效。如果忘记设置，或被其他 CSS 覆盖（如被重置为 display: block），该属性将完全无效。
- 检查开发者工具中父元素的 computed
display值是否为flex - 注意：
float、clear、vertical-align等属性在 Flex 容器内通常失效，勿混用 - 避免父元素同时设置了
display: grid或display: table，会覆盖 Flex 行为
明确主轴与交叉轴方向
align-items 和 align-self 只影响交叉轴。若你期望“水平居中”，但容器是默认的 flex-direction: row（主轴水平），那么交叉轴就是**垂直方向**，此时 align-items: center 才会让子项垂直居中；若误以为它能水平居中，就会觉得“没生效”。
-
flex-direction: row→ 主轴水平，交叉轴垂直 →align-items控制上下对齐 -
flex-direction: column→ 主轴垂直，交叉轴水平 →align-items控制左右对齐 - 需水平居中？应使用主轴对齐属性：
justify-content: center
检查子元素是否被 align-self 覆盖
align-self 是子元素自身的属性，优先级高于父容器的 align-items。若某个子项设置了 align-self: flex-start，即使父容器设了 align-items: center，该子项也会脱离统一对齐。
立即学习“前端免费学习笔记（深入）”；
- 在开发者工具中查看具体子元素的
align-self计算值（可能继承自父级，也可能被显式覆盖） - 临时移除子元素上的
align-self，观察是否恢复父级对齐效果 - 注意：
align-self: auto（默认值）会继承父容器的align-items，非auto值才会覆盖
排除常见干扰因素
某些样式或结构会导致视觉上“对齐失败”，实际是布局逻辑被干扰：
- 子元素有
margin（尤其margin-top/bottom在交叉轴上会叠加，掩盖对齐效果） - 子元素设置了固定高度且超出容器，或含
overflow: hidden，导致对齐位置不可见 - 父容器高度未明确（如为
height: auto且无内容撑开），交叉轴长度为 0，对齐无参考基准 - 使用了
min-height或flex: 1的子项，在多行 flex 容器（flex-wrap: wrap）中行为更复杂，建议先禁用换行测试
