要让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 就是最直接可靠的底部对齐方式。