按钮在flex中被拉高是因为默认align-items: stretch使子项在交叉轴上拉伸至父容器可用高度，该高度由最高子元素（如图片、多行文字）或显式min-height撑出；解决方法是设align-items: flex-start（全局）或align-self: flex-start（单个按钮），并统一box-sizing、line-height等样式。
为什么按钮在Flex里被拉高了？
Flex容器默认align-items: stretch，它会让所有子项在交叉轴（垂直方向）上拉伸到“当前可用高度”——这个高度不是凭空来的，而是由父容器的height/min-height决定，或由内容最高的那个子项撑出来的。如果旁边有<img>、带两行文字的<div>，或者某个子项写了<code>min-height: 200px，那按钮就会被强制拉高，而不是保持自身默认尺寸。
常见错误现象：
• 按钮看起来“变胖了”，但Computed面板里height值远大于line-height
• 给父容器加min-height: 200px后，按钮突然等高了
• 只改按钮样式没用，必须看父容器和兄弟元素
怎么让按钮不被拉伸？
最直接的办法是关掉stretch对它的影响，有两个层级可选：
- 改父容器：
align-items: center或align-items: flex-start—— 所有子项都按新规则对齐，按钮恢复自身高度 - 只动按钮：
align-self: center或align-self: flex-start—— 优先级更高，不影响其他子项
注意：align-self: stretch不能“重新启用”拉伸，除非你同时移除按钮自身的height、min-height、max-height —— 它们只要存在一个，stretch就自动失效。
按钮自身高度为啥浏览器间还不一样？
<button></button>和<input type="submit">是替换元素，各浏览器默认box-sizing、padding、line-height差异明显。Chrome下按钮常比input高1–2px，Safari更甚。
实操建议：
• 统一加box-sizing: border-box到所有表单控件
• 显式设line-height: 1.5（别用normal或空值）
• 移除border和outline：border: none; outline: none;
• 别用vertical-align补救——它在Flex里基本被align-self覆盖
卡片里按钮沉底却对不齐，问题出在哪？
这不是按钮的问题，是卡片内部结构没立住。想让按钮统一到底部，关键不是调按钮，而是让卡片自己形成可预测的高度结构：
- 每张卡片必须设
display: flex; flex-direction: column; - 内容区（标题+描述）用
flex: 1占满剩余空间 - 按钮作为最后一项，自然被“顶”到底部；或加
margin-top: auto（但前提是卡片高度可计算，比如有min-height） - 父容器（卡片网格）别设
align-items: flex-end——这会把整张卡片往下压，按钮还是错位
最容易被忽略的一点：卡片内部图片没设height: 100%或object-fit: cover，导致图片溢出、撑高卡片，前面所有对齐都白做。
