align-items: flex-end 在 flex-direction: row 时实现垂直居底需容器有明确高度；column 时则控制水平右对齐，垂直居底应使用 justify-content: flex-end；单个元素居底推荐 margin-top: auto。
align-items: flex-end 能让所有 Flex 子元素在交叉轴末端对齐，但“垂直居底”是否生效，取决于容器的 flex-direction 和是否有明确高度。
align-items: flex-end 在 row 主轴下是否真能“垂直居底”
默认 flex-direction: row 时，交叉轴是垂直方向，align-items: flex-end 确实会让子元素底部对齐到容器底边——但前提是容器必须有明确高度（如 height 或 min-height）。否则容器高度塌缩，视觉上看不到“居底”效果。
- 常见错误现象：
align-items: flex-end写了，但子元素还是贴着顶部或居中 - 根本原因：父容器没有设置高度，浏览器按内容撑高，
flex-end失去参照基准 - 正确写法示例：
.container { display: flex; align-items: flex-end; height: 400px; /* 必须显式指定 */ }
flex-direction: column 时 align-items: flex-end 的实际效果
当主轴改为垂直（flex-direction: column），交叉轴就变成水平方向，此时 align-items: flex-end 控制的是“水平右对齐”，不是垂直居底。想让子元素在 column 布局中垂直居底，得用 justify-content: flex-end（它作用于主轴）。
- 容易踩的坑：在
column容器里误用align-items实现垂直定位 - 正确对应关系：
flex-direction: row → align-items 控制垂直 flex-direction: column → justify-content 控制垂直
- 若需同时兼容两种方向，统一用
justify-content: center+align-items: center更安全，但注意它们的作用轴会随flex-direction切换
单个子元素想居底，别只靠 align-items
如果只是某个子元素需要固定在容器底部（比如页脚、操作按钮），而其他子元素仍按常规对齐，align-items 就不合适了——它影响所有子项。这时应该用 margin-top: auto 或 align-self: flex-end。
-
margin-top: auto是最直接的方案：在该子元素上设置，它会自动吸收上方剩余空间，把它“推”到底部 -
align-self: flex-end可覆盖父级align-items设置，但仅对该元素生效；注意它仍依赖容器有高度 - 对比示例：
.container { display: flex; align-items: center; height: 300px; } .footer { margin-top: auto; } /* 推到底部，不干扰其他元素 */
真正决定“居底”是否成功的关键，从来不是属性名本身，而是容器是否具备可计算的交叉轴尺寸，以及你有没有意识到 flex-direction 已悄悄调换了 align-items 和 justify-content 的职责。这两个细节漏掉任何一个，flex-end 都会静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
