align-self不生效主因是父容器未设display: flex；2. 子元素非直接子项或使用position: absolute脱离布局；3. 未正确理解flex-direction影响的对齐轴方向，导致设置错误。
当使用 CSS 实现子元素悬浮并对齐父容器时，如果发现 align-self 不生效，通常是因为 Flexbox 的布局逻辑或结构设置有误。下面分析常见原因并提供解决方案。
检查父容器是否启用了 Flex 布局
align-self 只在 Flex 子元素上有效，前提是其父元素必须设置为 display: flex 或 display: inline-flex。
.parent {
/* 缺少 display: flex */
}
.child {
align-self: flex-end;
}正确写法：
.parent {
display: flex;
height: 200px; /* 推荐设定高度以便观察对齐效果 */
}
.child {
align-self: flex-end; / 此时才会生效 /
}
确认子元素是直接子项
align-self 仅作用于 Flex 容器的直接子元素。如果目标元素嵌套在中间层 div 中，则不会受控。
立即学习“前端免费学习笔记（深入）”；
解决方法：
- 确保要调整对齐的元素是父容器的直接子节点
- 必要时重构 HTML 结构或改用其他布局方式（如嵌套 Flex）
处理与其他定位属性的冲突
若子元素设置了 position: absolute，它将脱离文档流，不再作为 Flex 子项参与布局，导致 align-self 失效。
- 避免对需要使用
align-self的元素使用绝对定位 - 如需精确定位，考虑用 margin 自动对齐或结合
justify-content/align-items控制整体分布
验证主轴与交叉轴方向
Flexbox 的对齐行为受 flex-direction 和 flex-wrap 影响。align-self 控制的是交叉轴上的对齐。
- 默认
flex-direction: row→align-self控制垂直对齐（上/中/下） - 若设为
flex-direction: column→align-self控制水平对齐（左/中/右）
确保理解当前方向，否则可能误以为样式未生效。
基本上就这些。只要父元素开启 Flex、子元素是直系后代、没有脱离布局流，并且正确理解对齐轴，align-self 就能正常工作。不复杂但容易忽略细节。
