align-items: flex-end作用于所有直接子元素的交叉轴终点对齐，若仅部分生效，必因父容器未设display: flex、子元素被align-self覆盖、或flex-direction为column导致交叉轴变为水平方向。
align-items: flex-end 为什么只对部分元素生效
它从来就不是“部分生效”——align-items 是容器级属性，作用于**所有直接子元素**的交叉轴对齐。所谓“部分底部对齐”，其实是你误用了该属性，或混入了其他干扰项。
常见错误现象：align-items: flex-end 写了，但只有高矮不一的几个块看起来“对齐了”，旁边的文字、按钮却没动；或者某些子元素完全没反应。
- 检查是否漏设
display: flex—— 父容器没启用 Flex，align-items直接被忽略 - 确认子元素没被
align-self覆盖（比如某个子项写了align-self: stretch或center） - 注意：行内元素（如
span、纯文本）在 Flex 容器中会自动包裹成匿名块，但其基线行为受line-height和vertical-align影响，视觉上容易“错位”
只想让某一个子元素沉底？用 margin-top: auto
这是最干净、最可控的做法，不干扰其他兄弟元素，也不依赖容器高度是否固定。
适用场景：侧边栏底部版权信息、卡片右下角操作按钮、弹窗底部确认按钮组。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须是
display: flex且flex-direction: column - 目标元素加
margin-top: auto—— 它会吃掉上方所有剩余空间，把自己“顶”到底部 - 避免和
flex-grow: 1同时用，后者会抢占空间，让auto失效 - 如果要水平居中或右对齐，额外加
align-self: center或align-self: flex-end（注意：这是写在子元素上，不是容器）
flex-direction: column 时 align-items 不管底部对齐
这是概念混淆的重灾区。align-items 控制的是**交叉轴**对齐。当主轴是垂直方向（flex-direction: column），交叉轴就是水平方向 —— 所以 align-items: flex-end 实际效果是让所有子元素**右对齐**，不是底部对齐。
想让子元素在垂直方向底部对齐，该用的是 justify-content: flex-end（主轴对齐），但前提是容器有明确高度（如 height: 100vh 或 min-height: 300px）。
- 没设高度 → 容器被内容撑开 →
justify-content: flex-end没有“底部”可对齐，表现就像没写 - 若容器本身是
position: absolute或高度由 JS 动态计算，justify-content就不可靠，此时仍推荐margin-top: auto - IE10/11 中
justify-content: flex-end支持良好，但align-items: flex-end需补-ms-align-items: end
多个元素一起沉底，但又不想全挤在最底下
比如一个卡片里有标题、描述、两个按钮（“取消”“确定”），希望按钮组整体沉底，但两个按钮之间保持间距、左对齐或居中——这时不能给每个按钮都加 margin-top: auto，否则它们会互相排斥、错位。
正确做法：把按钮包进一个 div，给这个包装盒加 margin-top: auto，再单独控制内部按钮布局。
- 包装盒设
display: flex+justify-content: flex-end（右对齐）或justify-content: center（居中） - 避免包装盒设
height或flex-grow，否则会破坏auto的空间分配逻辑 - 如果按钮高度不一致，用
align-items: center统一对齐基线，比依赖vertical-align更稳定
margin-top: auto 的可靠性远高于容器级对齐属性，尤其在动态内容、响应式场景下。真正容易被忽略的点是：它只在 Flex 子项上生效，且必须配合正确的 flex-direction 和无冲突的 flex 属性。 
