使用justify-content: flex-end可将子元素在主轴末端对齐，align-items: flex-end用于交叉轴末端对齐，而单个元素可通过margin-left: auto或margin-top: auto推至末端，灵活实现布局需求。
在CSS中使用Flexbox对齐子元素到容器末端，是一个常见且实用的布局需求。通过几个关键属性的组合，可以轻松实现子元素靠右、靠下或在交叉轴末端对齐的效果。
1. 主轴方向末端对齐（justify-content）
若想让子元素在主轴方向上对齐到末端，比如水平行中的右侧或垂直列中的底部，使用 justify-content: flex-end; 是最直接的方法。
说明：- 当 flex-direction: row 时，子元素会靠右对齐
- 当 flex-direction: column 时，子元素会靠下对齐
示例代码：
.container {
display: flex;
justify-content: flex-end;
}
2. 交叉轴末端对齐（align-items）
如果希望子元素在交叉轴方向对齐到末端，比如在横向伸缩容器中让内容底部对齐，使用 align-items: flex-end;。
立即学习“前端免费学习笔记（深入）”；
- 在 row 容器中，align-items: flex-end 让子元素底边对齐
- 在 column 容器中，它会让子元素右侧对齐（适用于文本或块元素）
示例代码：
.container {
display: flex;
flex-direction: row;
align-items: flex-end;
}
3. 单个子元素靠末端（margin-left: auto 或 margin-top: auto）
有时只需要某个特定子元素推到末端，而其他保持默认位置，这时用 auto 外边距更灵活。
技巧：- 在主轴方向使用 margin-right: auto 可将元素向左推，margin-left: auto 则推向右侧
- 在垂直方向，margin-top: auto 会将元素推到底部
示例：仅最后一个子元素靠右
.item:last-child {
margin-left: auto;
}
基本上就这些常用方法。根据布局方向和具体需求选择 justify-content、align-items 或 auto margin，能快速实现子元素对齐末端的效果，不复杂但容易忽略细节。
