使用align-items: flex-end可将flex子元素沿交叉轴末端对齐，在flex-direction: row时实现底部对齐；若需单独对齐某一元素，则可通过margin-top: auto将其推至容器底部，适用于卡片、页脚、聊天气泡等布局场景。
在CSS中使用Flexbox将元素对齐到底部，可以通过 align-items: flex-end 实现主轴垂直方向的对齐。这种方法适用于容器内子元素需要统一靠底部对齐的布局场景。
基本用法：align-items: flex-end
当父容器设置为 Flex 容器时，使用 align-items: flex-end 可以让所有子元素沿着交叉轴（cross axis）的末端对齐。在默认的 flex-direction: row 下，交叉轴是垂直方向，因此子元素会垂直对齐到底部。
.container {
display: flex;
align-items: flex-end; /* 子元素对齐到底部 */
}
.item {
/* 子元素样式 */
}
实现单个元素对齐底部
如果只想让某个特定子元素对齐底部，而不是全部子元素，可以使用 margin-top: auto。这个技巧利用了 Flexbox 的自动外边距特性，将元素“推”到容器底部。
.container {
display: flex;
flex-direction: column; /* 垂直排列 */
height: 300px; /* 需要固定高度或最小高度 */
}
<p>.bottom-item {
margin-top: auto; /<em> 自动填充上方空间，元素下沉到底部 </em>/
}</p>常见应用场景
- 卡片底部对齐：多个卡片高度不一致时，让按钮或文字统一对齐底部。
- 页脚固定在容器底端：在弹性布局中，让页脚始终贴在内容区域底部。
- 聊天消息气泡：时间戳对齐到每条消息的最下方。
注意事项
使用 align-items: flex-end 时，确保父容器有明确的高度或足够空间，否则对齐效果可能不明显。同时注意 flex-direction 的方向会影响“底部”的定义——若设置为 column-reverse，则 flex-end 会变成顶部。
立即学习“前端免费学习笔记（深入）”；
基本上就这些。灵活运用 align-items 和 margin: auto，可以轻松实现各种底部对齐需求。
