Flex布局中按钮高度不一致的主因是内容差异及默认样式干扰；需确保父容器display: flex且align-items: stretch，子项设align-self: stretch、vertical-align: top、box-sizing: border-box，并统一line-height或设固定height。
Flex布局中按钮高度不一致，通常是因为按钮内容（文字、图标、内边距）或默认样式差异导致的。单纯依赖 align-items: stretch 并不能完全解决问题——它只对**未设置明确高度且未设 align-self 的子项**生效，而按钮（button）在多数浏览器中是 display: inline-block 或有默认基线对齐行为，容易“逃逸”出 stretch 控制。
确保父容器启用 flex 且 align-items 正确
这是前提，但常被忽略：
- 父容器必须设
display: flex（或inline-flex） - 显式声明
align-items: stretch（它是 flex 容器的默认值，但建议写明以防重置） - 避免子项设置
align-self: flex-start、center等覆盖 stretch 行为
重置按钮自身的对齐与盒模型
按钮默认可能受 vertical-align、line-height 或浏览器 UA 样式影响。需统一干预：
- 给所有按钮设
align-self: stretch（强制继承 stretch） - 清除
vertical-align：加vertical-align: top或vertical-align: unset - 统一
box-sizing: border-box，避免 padding/border 计算差异 - 若按钮含文字，确保
line-height不干扰高度（可设为1或与 height 一致）
显式控制高度（最可靠方案）
当内容长度差异大（如“确定” vs “确认并同步至所有终端”），仅靠 stretch 无法拉平视觉高度。推荐组合策略：
立即学习“前端免费学习笔记（深入）”；
- 给按钮设固定
height（如40px）或min-height - 配合
padding调整内部空间，让文字垂直居中（padding-top === padding-bottom） - 用
white-space: nowrap防止换行导致高度突变；必要时加overflow: hidden; text-overflow: ellipsis;
检查是否被外层元素干扰
常见陷阱：
- 按钮包裹在
a或span中，这些元素可能有默认display或vertical-align - 父 flex 容器本身是内联元素（如
inline-flex），又被文本环绕，触发基线对齐 - CSS 重置不彻底（如未清
margin、font-size差异）
建议对齐前先统一 font-size、margin 和 border，并用浏览器开发者工具检查 computed styles 是否真被 stretch 生效。
