align-self 在 flex 容器中未让子项贴底，是因为父容器未设显式高度且 flex-direction 为 row 时 align-self 仅控制交叉轴（垂直）对齐；底部对齐需父容器有明确高度且交叉轴有可对齐空间。
align-self 在 flex 容器中为什么没让子项贴底？
直接给子元素设置 align-self: flex-end 却没效果，大概率是因为父容器的 flex-direction 是默认的 row —— 此时主轴水平、交叉轴垂直，align-self 控制的是**交叉轴对齐**，也就是上下方向；但若父容器高度未显式设定（比如没设 height 或 min-height），其实际高度就由内容撑开，没有“底部可对齐”的空间。
底部对齐必须满足的两个前提条件
Flex 底部对齐不是只靠 align-self 就能生效的，它依赖布局上下文：
- 父容器需是
display: flex且明确设置了高度（如height: 100vh、min-height: 400px），否则交叉轴无参考范围 - 若希望子项在**垂直方向贴底**，父容器的
flex-direction应为row（默认），并确保align-items不强制覆盖子项行为（例如设成flex-start是安全的）
更可靠的做法：用 margin-top: auto 替代 align-self
当目标只是让某个 flex 子项“沉到底部”，margin-top: auto 比 align-self: flex-end 更稳定，它会自动吸收上方剩余空间，不依赖父容器的 align-items 值，也不受交叉轴尺寸推导影响。
.container {
display: flex;
flex-direction: column;
height: 300px;
}
.item-bottom {
margin-top: auto;
}
注意：这个技巧在 flex-direction: column 下生效（此时 margin-top 沿主轴方向起作用）；如果容器是 row，则要用 margin-left: auto 实现右对齐。
align-self 和 align-items 的冲突关系
align-self 确实可以覆盖父级的 align-items，但前提是父容器的交叉轴有足够空间。常见误判点：
- 父容器设了
align-items: center，子项设align-self: flex-end—— 理论上生效，但如果父容器高度不足，视觉上仍像没动 - 子项本身有固定高度 + 外边距，可能掩盖对齐变化，建议临时加
outline: 1px solid red查看真实边界 - 使用
align-self时，别忘了检查是否意外触发了flex-wrap: wrap或多行布局，此时对齐逻辑会跨行变化
真正卡住的往往不是语法写错，而是容器高度不可见、或 flex 轴向理解反了——先确认 flex-direction 和你要对齐的方向是否匹配，再调样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
