最常见的原因是父容器未设display: flex，或子元素设置了align-self覆盖父级；父容器高度未明确时“可用空间底部”可能为0；IE10/11需用-ms-align-items: end并配合height: auto。
align-items: flex-end 为什么没生效
最常见的原因是父容器没设 display: flex，或者子元素被设了 align-self: stretch（默认值）以外的值覆盖了父级设置。另外，如果父容器高度未明确（比如靠内容撑开），flex-end 会按“可用空间底部”对齐——而这个可用空间可能就是 0，看起来就像没动。
- 确保父容器有
display: flex且高度可计算（如设min-height、height，或父级有固定高） - 检查子元素是否意外设置了
align-self，它会优先于align-items - 若子元素是块级元素且含 margin/padding，注意这些偏移会影响视觉对齐位置，但不影响 flex 对齐基准线
flex-end 对齐时子元素高度差异大，底部不齐怎么办
这是典型误解：align-items: flex-end 本就只对齐“交叉轴终点”，即所有子元素的底边都会贴到父容器交叉轴的末尾——只要父容器高度固定，它天然就能实现不同高度元素的底部对齐。所谓“不齐”，往往是因为：
- 父容器用了
align-items: baseline或没设该属性（默认是stretch） - 子元素内部内容有
vertical-align或行高影响，造成视觉错觉 - 某些子元素设置了
margin-bottom: auto，会抢占空间干扰对齐
验证方法：给父容器加 border: 1px solid red，再给每个子元素加 outline: 1px dashed blue，一眼看出底边是否真正在同一水平线。
IE10/11 中 align-items: flex-end 兼容性问题
IE10–11 支持 Flex，但存在两个关键缺陷：不支持 align-items: flex-end 的标准写法，且对 min-height 在 flex 容器中的表现异常。
- 必须加 IE 专用前缀：
-ms-align-items: end（注意值是end，不是flex-end） - 父容器若只设
min-height，IE 可能忽略；需配合height: auto或显式设height - 避免在 IE 中混用
align-self，部分版本会直接失效
示例兼容写法：
container {<br> display: -ms-flexbox;<br> display: flex;<br> -ms-align-items: end;<br> align-items: flex-end;<br> min-height: 200px;<br> height: auto;<br>}
用 margin-top: auto 替代 flex-end 的适用场景
当只需要某一个子元素“钉”在底部，其余保持默认对齐时，margin-top: auto 比 align-items 更精准——它利用 flex 剩余空间分配机制，把该元素往上顶到底部。
- 仅对单个子元素有效，不影响其他兄弟元素布局
- 不依赖父容器高度是否明确，即使父容器高度由内容决定也能工作
- 在 IE10+ 中支持良好（
margin: auto在 flex 项中有效），比-ms-align-items更稳定
示例：内容
底部按钮
Flex 布局的底部对齐看似简单，但实际受父容器尺寸计算、浏览器解析差异、以及子元素自身样式三重影响。最容易被忽略的是：没有显式高度的 flex 容器，其“底部”其实是动态的，这时候 flex-end 对齐的是那个动态底部，而不是你预期的视口或页面底部。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
