css flexbox布局与表单元素对齐_通过flex实现输入框的统一-css教程-PHP中文网

表单元素在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%。

css flexbox布局与表单元素对齐_通过flex实现输入框的统一

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;
}</p>

textarea在flex中“不听话”的特殊处理

textarea是替换元素（replaced element），默认display: inline-block，但它的height行为和input不同——设height会生效，但若内容超出会滚动，而用户往往希望它“看起来和其他输入框一样高”，又不想失去多行编辑能力。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

不要用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;
}</p>

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)）