Flex容器中按钮被拉伸到最高子元素高度，因默认align-items: stretch使子项在交叉轴上拉伸至最高子元素高度；若图片等有显式高度，按钮即被强制撑高而非自身变高。
Flex容器中按钮被拉伸到最高子元素高度
这是最常见也最容易被误判的原因：默认 align-items: stretch 会让所有子项在交叉轴（垂直方向）上拉伸至与“最高子元素”等高。如果按钮和图片、标题、卡片并列，而图片有明确高度（比如 height: 200px），按钮就会被强制撑高——不是它自己“变高”，而是被 Flex 拉伸了。
容易踩的坑：
- 只改按钮样式，不看父容器的
align-items值 - 用
height: 36px硬写在按钮上，结果在多行布局里反而破坏对齐 - 没意识到
stretch只对“无显式高度”的子项生效；一旦按钮写了min-height或内部有display: flex，拉伸就可能失效
button 和 input 默认盒模型不一致
浏览器对 button 和 input 的默认 box-sizing、padding、border、line-height 处理差异极大。Chrome 下 button 常比 input 高 1–2px，Safari 更明显。这不是 bug，是规范允许的渲染自由度。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一加
box-sizing: border-box到所有表单控件 - 显式设置
line-height（比如line-height: 1.5），别依赖浏览器默认值 - 移除
button的默认border和outline：border: none; outline: none; - 避免用
vertical-align补救——它基于基线，缩放或字体变化时立刻错位
子元素内部内容撑开高度不一致
按钮看起来“矮”，往往是因为它里面只有文字，而隔壁的 div 里有两行文字、图标+文字、或一张未设 height 的图片。Flex 的 stretch 是按“可用交叉轴空间”拉伸，但若父容器高度由内容撑开，那“可用空间”就是最高内容的高度——此时按钮其实被拉了，只是你没感知到。
关键判断点：
- 打开 DevTools，选中按钮，在 Computed 面板里查
height和offsetHeight是否相等 - 临时给父容器加
min-height: 200px，看按钮是否突然“长高”——如果是，说明之前是内容撑高模式 - 图片记得加
height: 100%+object-fit: cover，否则会溢出破坏拉伸一致性
flex-basis 或 min-height 干扰了 stretch 行为
align-items: stretch 很老实，但它只在干净环境下工作：子元素不能有 height、min-height、max-height，也不能是嵌套的 flex 容器且自身又设了 align-items: flex-start。
常见干扰项：
-
button { flex: 1; }同时又写了min-height: 40px→min-height优先级更高，stretch被绕过 - 父容器用了
flex-wrap: wrap但没设align-content，导致多行时各行高度不均，误以为是单个按钮问题 - 用了 CSS 重置库（如 normalize.css）悄悄把
align-items改成了flex-start，Computed 面板里才能看到真实值
真正难调的，从来不是属性本身，而是哪一行样式在哪个上下文里悄悄接管了控制权。多看两眼 Computed，比反复试 !important 快得多。
