为什么CSS Flex中的按钮高度不一致？

Flex容器中按钮被拉伸到最高子元素高度，因默认align-items: stretch使子项在交叉轴上拉伸至最高子元素高度；若图片等有显式高度，按钮即被强制撑高而非自身变高。

Flex容器中按钮被拉伸到最高子元素高度

这是最常见也最容易被误判的原因：默认 align-items: stretch 会让所有子项在交叉轴（垂直方向）上拉伸至与“最高子元素”等高。如果按钮和图片、标题、卡片并列，而图片有明确高度（比如 height: 200px），按钮就会被强制撑高——不是它自己“变高”，而是被 Flex 拉伸了。

容易踩的坑：

1. 只改按钮样式，不看父容器的 align-items 值
2. 用 height: 36px 硬写在按钮上，结果在多行布局里反而破坏对齐
3. 没意识到 stretch 只对“无显式高度”的子项生效；一旦按钮写了 min-height 或内部有 display: flex，拉伸就可能失效

button 和 input 默认盒模型不一致

浏览器对 button 和 input 的默认 box-sizing、padding、border、line-height 处理差异极大。Chrome 下 button 常比 input 高 1–2px，Safari 更明显。这不是 bug，是规范允许的渲染自由度。

实操建议：

1. 统一加 box-sizing: border-box 到所有表单控件
2. 显式设置 line-height（比如 line-height: 1.5），别依赖浏览器默认值
3. 移除 button 的默认 border 和 outline：border: none; outline: none;
4. 避免用 vertical-align 补救——它基于基线，缩放或字体变化时立刻错位

子元素内部内容撑开高度不一致

按钮看起来“矮”，往往是因为它里面只有文字，而隔壁的 div 里有两行文字、图标+文字、或一张未设 height 的图片。Flex 的 stretch 是按“可用交叉轴空间”拉伸，但若父容器高度由内容撑开，那“可用空间”就是最高内容的高度——此时按钮其实被拉了，只是你没感知到。

关键判断点：

1. 打开 DevTools，选中按钮，在 Computed 面板里查 height 和 offsetHeight 是否相等
2. 临时给父容器加 min-height: 200px，看按钮是否突然“长高”——如果是，说明之前是内容撑高模式
3. 图片记得加 height: 100% + object-fit: cover，否则会溢出破坏拉伸一致性

flex-basis 或 min-height 干扰了 stretch 行为

align-items: stretch 很老实，但它只在干净环境下工作：子元素不能有 height、min-height、max-height，也不能是嵌套的 flex 容器且自身又设了 align-items: flex-start。

常见干扰项：

1. button { flex: 1; } 同时又写了 min-height: 40px → min-height 优先级更高，stretch 被绕过
2. 父容器用了 flex-wrap: wrap 但没设 align-content，导致多行时各行高度不均，误以为是单个按钮问题
3. 用了 CSS 重置库（如 normalize.css）悄悄把 align-items 改成了 flex-start，Computed 面板里才能看到真实值

真正难调的，从来不是属性本身，而是哪一行样式在哪个上下文里悄悄接管了控制权。多看两眼 Computed，比反复试 !important 快得多。