Flex垂直流中align-items失效是因为它控制横轴（水平）对齐，而底部对齐需用justify-content: flex-end（容器须有明确高度）或更可靠的margin-top: auto（子项生效，不依赖容器高度），并配合align-self调整水平位置。
Flex垂直流方向下align-items为什么失效
因为flex-direction: column时，主轴变成垂直方向，align-items控制的是**横轴（即水平方向）**的对齐，它管不了底部对齐这件事。真正起作用的是justify-content——它负责主轴上的分布，在垂直流里就是控制上下排列。
用justify-content: flex-end实现底部对齐
这是最直接的方式，前提是容器高度固定或有明确边界（比如height: 100vh），否则内容会撑开容器，flex-end就“没地方可end”。
常见错误现象：justify-content: flex-end写了但没效果 → 容器没设高度，或者父容器高度为auto。
- 必须确保容器本身有明确高度（
height、min-height或继承自父级） - 如果容器是
body或html，记得给它们也设height: 100% - 避免用
display: flex在position: absolute元素上还依赖文档流高度
section {
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 100vh;
}
margin-top: auto比justify-content更可靠
当容器高度不确定，或内部还有其他兄弟元素要保持位置关系时，margin-top: auto是更稳的选择。它会把目标元素“推”到剩余空间底部，不依赖容器是否设高，兼容性也好（Flexbox基础属性，Chrome 29+/Firefox 20+都支持）。
立即学习“前端免费学习笔记（深入）”；
使用场景：页脚固定在视口底部、弹窗中按钮下沉、卡片内操作栏右下角定位。
- 只对**Flex子项**生效，父容器必须是
display: flex且flex-direction: column - 目标元素不能是
flex-grow: 1或有其它拉伸行为，否则auto会被覆盖 - 多个元素想一起沉底？给最后一个加
margin-top: auto，前面的保持默认
.container {
display: flex;
flex-direction: column;
}
.footer {
margin-top: auto;
}
别忘了align-self处理水平偏移
底部对齐后，元素默认还是沿横轴起点（左对齐）贴边。如果想居中或右对齐，不能靠text-align，得用align-self——它是子项自己的横轴对齐方式。
容易踩的坑：align-self在flex-direction: column下才真正影响水平位置；写在容器上无效，必须写在子元素上。
-
align-self: center→ 水平居中 -
align-self: flex-end→ 右对齐（注意不是right） - 如果父容器设置了
align-items: center，子项仍可用align-self覆盖
margin-top: auto写到了非Flex子项上。 
