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 控制上下对齐：
立即学习“前端免费学习笔记（深入）”；
