align-items: center仍不对齐是因为input和button基线位置不同，需配合box-sizing: border-box、显式height、line-height及ie11/safari兼容处理。
为什么align-items: center还是没对齐
因为 align-items: center 是按容器交叉轴中点对齐，而 input 和 button 的基线（baseline）位置不同：前者文字底部对齐，后者默认内容盒底部附近对齐。两者参考线不一致，视觉上仍像一高一低。
更稳的做法是同时加两层控制：
- 父容器设
align-items: center - 所有表单子元素统一加
vertical-align: middle（对 inline-level 元素有效） - 避免单独给
label或input写vertical-align—— 在 flex 容器里它只对自身生效，但无法改变 flex 对齐逻辑
box-sizing 和 height 必须显式设置
默认 box-sizing: content-box 下，padding 和 border 会撑大实际高度，导致即使写了 height: 36px，input 和 button 真实占用空间也不等。
必须统一重置：
- 全局加
input, button, select, textarea { box-sizing: border-box; } - 显式设
height: 36px（别用em或rem，防继承干扰） -
button要清空上下padding：padding: 0 12px，否则内部文字会被顶高 -
input若有font-size变化，需同步调line-height，否则 baseline 会漂移
textarea 在 flex 中怎么“站齐”
textarea 是替换元素，默认 display: block，设 height 会硬压、失去滚动能力；设 min-height 又容易和其它控件高度不一致。
推荐组合写法：
- 用
min-height: 36px+resize: vertical - 加
line-height: 1.5并确保font-size与input一致 - 若必须严格等高显示，外层包
div设display: flex，内部textarea设flex: 1+align-self: center - 别依赖
vertical-align—— 它对display: block的textarea无效
老版本 Safari 和 IE11 的兼容陷阱
Safari ≤ 12 对 flex: 1 在表单控件上支持不稳定；IE11 根本不认 flex: 1，且 align-items: center 在无明确高度的容器里常失效。
兜底方案要分层写：
- Safari：改用
flex: 1 1 0（即flex-basis: 0），并给父容器加min-width: 0 - IE11：加 class 如
.ie-flex-fix，用display: table-cell+vertical-align: middle替代 flex - 终极保底：预估按钮宽度，写
width: calc(100% - 80px)（80px 是按钮宽+内边距）
真正卡点不在 flex 语法本身，而在浏览器对表单控件 UA 样式的实现差异 —— baseline、字体度量、box model 三层叠加，任何一个没控住，对齐就飘。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
