flex容器子元素不贴底，主因是align-items默认为stretch而非flex-end；需确保父容器有明确高度、正确区分主轴/交叉轴，并用align-self单独控制子项。
flex容器里子元素不贴底？检查align-items是否设对了
默认情况下，flex容器的align-items是stretch，不是flex-end。如果子元素高度不占满容器，又没显式设置align-items: flex-end，那它根本不会底部对齐。
实操建议：
- 确保父容器已声明
display: flex且有明确高度（比如height: 100vh或min-height），否则flex-end没参照系 -
align-items: flex-end作用于**所有直接子元素**，不是单个元素；想单独控制某个子项，得用align-self: flex-end - 若子元素本身是块级且带
margin或padding，可能视觉上“没贴到底”，需检查盒模型干扰
为什么加了align-items: flex-end还是没效果？
常见错误现象：样式写了，浏览器开发者工具里也显示生效，但元素纹丝不动——大概率是容器没形成“交叉轴”可衡量的空间。
原因和应对：
立即学习“前端免费学习笔记（深入）”；
- 父容器没有设定高度，或者高度由内容撑开（
height: auto），此时交叉轴长度为0，flex-end无从对齐 - 容器设了
flex-direction: column，这时主轴变垂直，align-items控制的是**水平方向**对齐（即左/中/右），不是底部；要底部对齐得改用justify-content: flex-end - 子元素被
flex: 1或flex-grow: 1拉伸，强行占满空间，掩盖了align-items的效果
align-items和justify-content别混用错轴
这是最常踩的坑：记反了哪个控制哪条轴。一句话分清：align-开头的管**交叉轴**（cross axis），justify-开头的管**主轴**（main axis）。
使用场景对照：
- 默认
flex-direction: row→ 主轴水平 →justify-content控制左右，align-items控制上下 - 设了
flex-direction: column→ 主轴垂直 →justify-content控制上下（能实现底部对齐），align-items控制左右 - 想让单个子项底部对齐而其他居中？不用动容器属性，直接给那个元素加
align-self: flex-end
兼容性与性能提醒：老浏览器慎用align-items: flex-end
IE10–IE11只支持旧版Flexbox语法（-ms-flex-align: end），而且行为不一致；Safari 8及更早版本对align-items在某些嵌套场景下渲染异常。
建议：
- 项目需兼容IE时，优先用
margin-top: auto替代align-items: flex-end（前提是父容器display: flex且子项未设flex-grow） - 避免在高频重排场景（如滚动中动态增删子项）频繁切换
align-items值，这会触发整条交叉轴重新计算布局 - 移动端iOS Safari 12.2之前，
align-items: flex-end在min-height容器中偶现失效，补height: 0或用align-self更稳
