align-items: stretch 默认拉伸子项填满交叉轴，align-items: center 则保持子项原始尺寸仅位移居中；前者适用于需高度对齐的卡片/表单，后者更可控但受 margin/padding 影响。
flexbox 中 align-items: center 和 align-items: stretch 的行为差异
align-items 控制的是 flex 容器内所有子项在交叉轴（cross axis）上的对齐方式。默认值就是 stretch，不是 center —— 这点很多人一开始会误以为“居中更自然”，结果发现元素没居中，其实是被拉伸了。
关键区别在于： stretch 会让子项**填满容器的交叉轴尺寸**（除非子项设置了明确高度/宽度），而 center 是**无视自身尺寸、统一按内容盒居中**。
什么时候该用 stretch？常见误用场景
适合用于卡片列表、表单字段组、导航栏等需要视觉对齐高度的布局。但容易踩坑：
- 子项有
min-height或height时，stretch不会覆盖它们，但会受max-height限制 - 如果子项是
img或button等替换元素，stretch可能导致变形（尤其图片没设Object-fit） - 当容器交叉轴尺寸为
auto（比如 flex 容器本身没设高度），stretch实际失效，退化为baseline行为
为什么 align-items: center 经常看起来“更可控”
它不改变子项原始尺寸，只做位移对齐。适用于：
- 按钮内部图标+文字垂直居中
- 弹窗标题栏中左右操作按钮与文字对齐
- 响应式卡片中，不同长度标题下的底部操作区保持统一垂直位置
注意：center 对子项的 margin 和 padding 敏感；如果子项顶部有大 margin-top，它仍会以内容盒中心为基准，不是以 margin 边界为基准。
立即学习“前端免费学习笔记（深入）”；
交叉轴对齐还依赖 flex-direction
别忘了：align-items 的“交叉轴”方向由 flex-direction 决定：
flex-direction: row; /* 主轴水平 → 交叉轴垂直 → align-items 控制上下对齐 */ flex-direction: column; /* 主轴垂直 → 交叉轴水平 → align-items 控制左右对齐 */所以当你写 align-items: center 却没生效，先确认容器是不是 flex-direction: column，此时它其实是在做**水平居中**，而不是你预期的垂直居中。
真正容易被忽略的，是交叉轴尺寸未定义时 stretch 的静默退化，以及 align-items 在嵌套 flex 容器中作用域的边界 —— 它只影响直接子元素，不会穿透。