要使子元素垂直对齐到底部，需设父容器为 display: flex、有明确高度，并根据 flex-direction 选择 align-items: flex-end（主轴为 row）或 justify-content: flex-end（主轴为 column）；也可用 margin-top: auto 实现更灵活的底部对齐。

在 CSS Flex 布局中，如果希望容器内的子元素垂直对齐到底部，关键在于正确设置容器的 align-items 属性，并确保父容器具备明确的高度和 Flex 上下文。

确认父容器是 flex 容器且有高度

仅设置 align-items: flex-end 是不够的。Flex 的对齐行为依赖于交叉轴（cross axis）——对于 flex-direction: row（默认），交叉轴是垂直方向，此时 align-items 才控制上下对齐。

• 父元素必须声明 display: flex 或 display: inline-flex
• 父容器需有明确的、可测量的高度（如 height: 300px、min-height: 100vh），否则“底部”无从参照
• 避免父容器高度被内容塌缩（例如没有设置高度且子项未撑开）

检查 flex-direction 和 align-items 的配合

align-items 的效果取决于主轴方向：

• 当 flex-direction: row（默认）→ 交叉轴为 垂直方向 → align-items: flex-end = 子项底部对齐容器底边
• 当 flex-direction: column → 交叉轴为 水平方向 → 此时 align-items: flex-end 是右对齐，不是底部对齐；要底部对齐应改用 justify-content: flex-end

子元素自身不干扰对齐（常见陷阱）

以下情况可能导致看似“没对齐到底部”：

• 子元素设置了 margin-bottom 或 padding-bottom，视觉上看起来悬空
• 子元素是行内元素（如 span）且未设 display: block，可能受基线对齐影响
• 父容器有 padding-bottom，导致内容离容器底边有距离 —— 可改用 box-sizing: border-box 或调整 padding

更灵活的替代方案：使用 margin auto

若只需单个子元素到底部，且不想依赖 align-items，可对子元素设置自动外边距：

• 父容器保持 display: flex + flex-direction: column
• 目标子元素添加 margin-top: auto，它会吸收上方剩余空间，自然“推”到底部
• 这种方式不依赖容器高度是否固定，兼容性也更好