align-items 对动态高度元素生效，只要子元素有真实渲染高度（内容撑开、min-height 或 JS 设置），它就按最终盒模型在交叉轴对齐；失效常因容器非 flex、overflow 截断或 align-self 覆盖。
align-items 对动态高度元素是否生效
align-items 在 Flex 容器上设置，它控制的是所有直接子项在交叉轴上的对齐方式。只要子元素高度是真实渲染出来的（哪怕由内容撑开、min-height 或 JS 动态设置），align-items 就会起作用——它不关心高度是否“固定”，只依赖最终布局盒的高度。
常见误判是：子元素用了 height: auto 或内容动态增减后对齐失效。这通常不是 align-items 失效，而是容器没设 display: flex，或父级存在 overflow: hidden 截断了布局，又或者子项被 align-self 覆盖了。
align-items: center 为何有时看起来没居中
当子元素高度变化时，align-items: center 看似“偏移”，往往因为：
- Flex 容器自身没有明确的交叉轴尺寸（比如列方向下没设
height或min-height），导致浏览器按内容高度收缩，视觉上“没空间可居中” - 子项内有
margin、padding或border，而align-items对齐的是整个盒模型（含 padding/border），不是内容区 - 文本行高（
line-height）或字体度量影响视觉中心，尤其单行文本配合align-items: center时，常需额外用display: flex; align-items: center包一层文本容器来精确控制
不同高度子项共存时 align-items 的实际行为
假设 Flex 方向为 row（主轴水平），那么交叉轴是垂直方向，align-items 控制上下对齐：
立即学习“前端免费学习笔记（深入）”；
• align-items: flex-start → 所有子项顶部对齐（不管谁高谁矮）
• align-items: flex-end → 所有子项底部对齐
• align-items: center → 所有子项在容器交叉轴中心线上居中，即每个子项自己的垂直中点与容器垂直中点重合
• align-items: stretch（默认）→ 子项高度拉伸至容器高度（除非设了 height、max-height 或 align-self: flex-start 等覆盖）
注意：stretch 在子项有 height: auto 且无其他限制时，会让它们“看起来高度一致”，但这只是拉伸效果，并非真实改变内容高度。
动态高度下更可靠的对齐组合
纯靠 align-items 有时不够，尤其当子项内部结构复杂或需响应式适配时：
- 给 Flex 容器加
min-height: 0（尤其嵌套 Flex 中），防止 Chrome/Firefox 对align-items: stretch的异常截断 - 对特定子项用
align-self: flex-start覆盖全局align-items，比改容器更灵活 - 若需子项内容（而非整个盒）垂直居中，优先在子项内部再建一层
display: flex; align-items: center; justify-content: center - 避免依赖
vertical-align—— 它在 Flex 子项上完全无效
真正容易被忽略的是：动态高度元素的父容器如果本身是 display: inline-flex，其基线对齐行为会干扰 align-items 效果，此时应显式设为 display: flex。
