要让Flex容器的子项底部对齐，应设置容器的align-items: flex-end；该属性使所有子项在交叉轴（主轴为row时即垂直方向）底边与容器底边对齐，需确保容器有足够高度或子项高度存在差异。
在 Flex 布局中，若容器设置了 display: flex，且子项高度不一致，默认会沿交叉轴（垂直方向）顶部对齐。要让所有子项的**底部对齐**，关键在于设置容器的 align-items: flex-end。
align-items: flex-end 的作用
该属性控制的是**所有子项在交叉轴上的对齐方式**。当主轴为水平（flex-direction: row，默认值）时，交叉轴就是垂直方向，此时 flex-end 表示“底部对齐”——即每个子项的底边会与容器的底边（或最后一行底边）对齐。
- 仅作用于容器，无需在子项上额外设置
- 要求容器有明确的高度（否则可能无视觉效果），或子项本身有高度差异才明显可见
- 若容器高度未设定，浏览器按内容撑开，底部对齐仍生效，但容器底边等于最高子项的底边，效果可能不直观
常见问题与注意事项
有时设了 align-items: flex-end 却没看到底部对齐，可能是以下原因：
-
容器高度不够或未设置：如果容器高度小于最高子项，底部对齐会被截断；建议给容器设一个足够高的
min-height或固定height - 子项用了 margin-top/margin-bottom：外边距会影响实际位置，建议优先用 padding 或 align-self 调整单个子项
-
主轴方向被修改过：若设置了
flex-direction: column，交叉轴变成水平方向，flex-end就变成“右对齐”，此时需用justify-content: flex-end才能实现底部对齐（因为此时主轴是垂直的）
替代方案：单个子项底部对齐
如果只需某一个子项（如按钮、图标）固定在底部，而其他子项保持默认对齐，可对那个子项单独设置：
立即学习“前端免费学习笔记（深入）”；
-
align-self: flex-end—— 在flex-direction: row下让该子项底部对齐 - 配合
margin-top: auto也能推到底部（尤其适合单个元素），原理是自动分配剩余空间到上方
不复杂但容易忽略细节。只要容器是 flex 容器、主轴水平、交叉轴方向明确，align-items: flex-end 就是最直接可靠的底部对齐方式。
