要使子元素垂直对齐到底部，需设父容器为 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，它会吸收上方剩余空间，自然“推”到底部 - 这种方式不依赖容器高度是否固定，兼容性也更好
