align-items: stretch 的本质是拉伸子元素至父容器交叉轴可用高度，而非强制等高；它依赖父容器有明确高度基准，显式设置 height/min-height/max-height 的子项将不参与拉伸，替换元素需额外处理才能响应拉伸。
align-items: stretch 的本质不是“等高”，而是“拉伸到容器交叉轴尺寸”
它不比较子元素内容高度，也不主动统一它们的 height 值；它只看父容器在交叉轴（默认是垂直方向）上**当前可计算的高度**，然后把所有符合条件的子元素“撑满”这个空间。如果父容器高度是 auto 且由内容撑开，那最高那个子项决定了容器高度，其余子项就跟着被拉过去——看起来像等高，其实是被动响应。
常见错误现象：div 写了 display: flex 却没等高，用开发者工具检查父容器的 Computed 面板，height 显示 auto 或极小值（如 24px），基本就是没高度基准。
- 临时加
min-height: 200px看是否立刻等高，能快速验证是不是高度缺失 - 嵌套布局中，常靠外层
flex: 1让父容器占满剩余空间，间接提供拉伸基准 - 避免用
height: 100%而不确认父级是否有明确高度，否则会连锁失效
哪些子元素会被 stretch “绕过”或“拒绝”？
只要子元素显式设置了 height、max-height 或 min-height（哪怕只是 min-height: 0），它就退出拉伸队列。其他子项再怎么 stretch，也无法和它对齐。
特别注意替换元素：<img>、<button></button>、<textarea></textarea> 默认按基线对齐（baseline），即使父容器设了 stretch，它们也不会被拉高——这常被误认为“失效”，其实是行为不同。
-
<img>在 Safari 中可能被min-height: auto（来自 normalize.css 等）悄悄禁用 stretch -
<textarea></textarea>默认有内部块级渲染逻辑，需加min-height: 0才能参与拉伸 - 用开发者工具选中子项，在
Computed面板搜height和min-height，看是否被显式设置
为什么按钮/图片看起来“被拉高”，但实际不是它们变高了？
按钮被拉高，不是它自己 height 变了，而是 align-items: stretch 强制它填满父容器交叉轴空间。如果同级有个 <img> 高 300px，而父容器恰好被撑到 300px，按钮就会被拉到 300px ——它的内容仍居中，但盒模型被撑开了。
图片变形更隐蔽：它可能没写 height，但父容器有固定高度 + stretch，浏览器就按比例拉伸整个图像盒，导致宽高比失真。
- 仅改
align-items: flex-start可让按钮保持原始高度，但不解决图片宽高比问题 - 图片要真正防变形，必须配合
object-fit: cover或contain，且确保其父容器（即 flex 子项）有明确高度（比如靠flex: 1） - 给
<img>加flex-shrink: 0和min-height: 0，才能切断 stretch 对原始比例的干扰
想取消拉伸，别只盯着 align-items
直接设 align-items: flex-start 是最快解法，但容易掩盖更深层问题。真正要稳住高度，关键在控制子元素自身的弹性权限：
- 用
flex-shrink: 0防止压缩或意外拉伸干扰height - 用
min-height替代height，既保留最小底线，又允许内容自然增长 - 对正方形子元素，
width: 100px; min-height: 100px;+align-items: flex-start比单纯height: 100px更可靠 - 嵌套 Flex 时，
align-self会覆盖父级align-items，调试时得逐层查Computed值
最易被忽略的一点：等高的“高度来源”永远在父容器，不在子元素。盯着子项调 height 不如先确认父容器的 computed height 是多少、是不是 auto。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
