表单元素在flex容器中对齐不一致是因为baseline对齐、box-sizing、padding、border、line-height默认值差异；统一需三步：box-sizing: border-box、固定height、vertical-align: middle；textarea宜用min-height+resize；ie11需flex: 1 1 0和max-width: 100%。
flex布局中input、select、textarea默认对齐不一致的原因
表单元素在Flex容器里经常上下错位，不是因为Flex没生效，而是input、select、textarea的基线（baseline）默认对齐方式不同，且它们的box-sizing、padding、border、line-height默认值差异大。比如select常比input高1–2px，textarea又因vertical-align: baseline悬在半空。
统一高度与垂直对齐的关键CSS设置
只需三步就能让所有表单控件在Flex容器中“站齐”：
- 给所有表单元素设置
box-sizing: border-box，避免padding/border撑大尺寸 - 显式声明
height或min-height（推荐用height: 36px这类固定值，而非em或rem相对单位，防止继承干扰） - 强制重置对齐：
vertical-align: middle（对inline-level元素有效），再配合Flex容器的align-items: center
.form-row {
display: flex;
align-items: center; /* 关键：让子项垂直居中 */
gap: 8px;
}
<p>.form-row input,
.form-row select,
.form-row textarea {
box-sizing: border-box;
height: 36px;
vertical-align: middle;
margin: 0;
padding: 6px 12px;
border: 1px solid #ccc;
font-size: 14px;
}textarea在flex中“不听话”的特殊处理
textarea是替换元素（replaced element），默认display: inline-block，但它的height行为和input不同——设height会生效，但若内容超出会滚动，而用户往往希望它“看起来和其他输入框一样高”，又不想失去多行编辑能力。
- 不要用
height硬压textarea，改用min-height+resize: vertical - 加
line-height: 1.5并确保font-size与其它控件一致，避免文字上下偏移 - 若必须等高显示，可包裹一层
div并设display: flex，让textarea自身flex: 1并align-self: center
.form-row .textarea-wrapper {
display: flex;
align-items: center;
height: 36px;
}
<p>.form-row textarea {
flex: 1;
min-height: 36px;
resize: vertical;
line-height: 1.5;
margin: 0;
padding: 6px 12px;
box-sizing: border-box;
}IE11兼容性与flex-item收缩问题
IE11对flex: 1在表单元素上的支持不稳，尤其当input内有长placeholder或中文时，可能突然换行或溢出。更稳妥的做法是：
立即学习“前端免费学习笔记（深入）”；
- 避免对
input直接用flex: 1，改用flex: 1 1 0（即flex-grow: 1; flex-shrink: 1; flex-basis: 0） - 为所有表单元素加
max-width: 100%，防止Flex拉伸失控 - IE11下
align-items: center对select仍有1px偏差，可补margin-top: -1px微调（仅IE条件注释或@supports not (flex-wrap: wrap)）
真正难搞的不是写法，而是不同浏览器对select内部渲染盒模型的私有实现——它永远比你调试的那一次多一个像素。留1px余量，比死磕像素级对齐更实际。
