align-items: flex-end 仅在父容器为 display: flex、有明确高度且 flex-direction: row（默认）时才实现底部对齐；若为 column 则变为右对齐，子元素无显式高度或被 margin/vertical-align 干扰时也无效。
align-items: flex-end 为什么只在某些情况下生效
它只对 display: flex 的直接子元素起作用，且对齐方向取决于 flex-direction。默认 flex-direction: row 时，交叉轴是垂直方向，align-items: flex-end 才表示“底部对齐”；如果改成 column，交叉轴变成水平方向，这时它就变成“右对齐”了。
常见错误是给父容器设了 align-items: flex-end，但子元素本身是块级（如 <div>）且没设高度，导致视觉上没变化——因为子元素高度由内容撑开，底部自然贴底，看不出“对齐效果”。真要对比，得让子元素高度不一致，比如一张高图、一张矮图。
<ul>
<li>确保父容器有明确高度（如 <code>height: 200px）或被其他方式限制尺寸，否则 align-items 在无约束下表现不可控
margin-bottom: auto 或 align-self 覆盖，否则会干扰整体对齐vertical-align: bottom，它对 flex 项目完全无效align-self: flex-end 和 margin-top: auto 哪个更稳
align-self: flex-end 是单个子元素的局部控制，适合让其中某一个下沉到底部；而 margin-top: auto 是利用 flex 的自动外边距分配机制，把前面所有空间“吸走”，让该元素沉到交叉轴末端——它不依赖交叉轴尺寸计算，在嵌套 flex 或动态内容（比如 JS 插入新节点）场景下更鲁棒。
尤其当父容器是 flex-direction: column 时，align-items: flex-end 会失效（变成水平右对齐），但 margin-top: auto 依然能推到最后：
.container { display: flex; flex-direction: column; height: 300px; }
.bottom-item { margin-top: auto; }
-
margin-top: auto不需要改父容器的align-items，冲突风险低 - 多个元素都设
margin-top: auto会并排挤在底部，不是叠加，这点要注意 -
align-self优先级高于align-items，可用于微调个别项，但别滥用
图片或文字底部对齐时，为什么总差几个像素
这是行内格式化上下文（IFC）残留影响：即使用了 flex，如果子元素是 <img> 或未重置的 <span></span>，它们默认 vertical-align: baseline，会在底部留出 descender 空隙（比如字母 g、y 的下延部分）。这个缝隙和 flex 对齐无关，但会叠加显示。
解决方法很简单，加一行：
.container img, .container span { vertical-align: bottom; }
- 仅对 inline-level 元素有效（
<img>、<span></span>、<input>等），块级元素不用管 - 别写在父容器上，必须写在这些内联子元素自身选择器里
- 如果用了
font-size: 0清空间隙，记得在子元素里重设字体大小，否则文字消失
兼容性与 fallback 方案怎么选
现代浏览器对 flex 的 align-items 和 margin-top: auto 支持极好（Chrome 29+/Firefox 20+/Safari 6.1+），但如果你必须支持 IE10–11，注意：margin-top: auto 在 flex column 中不被识别，align-self 也不稳定。
此时推荐降级用 display: table-cell + vertical-align: bottom：
.fallback-container { display: table-cell; height: 200px; vertical-align: bottom; }
- 要求父容器设
display: table且有固定高度 - 不支持百分比高度继承，
height: 100%在 table-cell 里常失效 - 绝对定位（
position: absolute; bottom: 0）虽然精准，但会让元素脱离文档流，父容器无法自适应高度——这点最容易被忽略
