align-items: flex-end 无效主因是父容器未设 display: flex 或无明确高度；需确保父元素为 Flex 容器、设固定/最小高度（如 min-height: 100vh）、保持 flex-direction: row，默认交叉轴垂直才生效。
如果 CSS 中使用 align-items: flex-end 但内容仍无法贴近容器底部对齐，通常不是属性写错了，而是 Flex 布局的前提条件没满足。
确保父容器是 Flex 容器
align-items 是作用于 Flex 容器（即设置了 display: flex 或 display: inline-flex 的父元素）的属性。如果只在子元素上写 align-items: flex-end，它是无效的。
- ✅ 正确：父元素设置
display: flex; align-items: flex-end; - ❌ 错误：只在子元素上写
align-items: flex-end;
检查父容器是否有明确高度
Flex 的 align-items: flex-end 是沿交叉轴（默认为垂直方向）对齐。若父容器高度由内容撑开（比如 height: auto），那“底部”其实就是内容自然结束的位置，视觉上不会出现“留白+贴底”效果。
- 给父容器设置固定高度（如
height: 300px;）或最小高度（min-height: 300px;） - 常见场景：全屏布局可设
min-height: 100vh;
确认主轴和交叉轴方向
默认 flex-direction: row，此时主轴水平、交叉轴垂直，align-items 控制上下对齐；若改成 flex-direction: column，交叉轴就变成水平方向，align-items: flex-end 就会控制右对齐。
立即学习“前端免费学习笔记（深入）”；
- 要让内容贴**底部**，保持
flex-direction: row（默认值）即可 - 如需贴右侧，请用
justify-content: flex-end（主轴对齐）
排除 margin/padding/box-sizing 干扰
子元素自身的 margin、padding 或父容器的内边距可能造成视觉偏移；同时确保未意外设置 box-sizing: border-box 外的其他值影响尺寸计算。
- 临时加
outline: 1px solid red;查看真实边界 - 重置子元素
margin: 0;排查外边距塌陷或默认样式
