使用 Flexbox 可解决表单控件对齐问题：1. 设置容器 display: flex；2. 用 align-items: center 实现垂直居中；3. justify-content 控制水平分布；4. 配合重置 margin、padding、box-sizing 和统一字体行高，确保跨浏览器一致性。
表单控件在网页中经常出现水平对齐不一致的问题，尤其是不同浏览器对 input、select、button 等元素的默认样式处理不同。使用 Flexbox 的 justify-content 和 align-items 可以高效解决这类问题。
理解 justify-content 与 align-items 的作用
justify-content 控制主轴（默认为横轴）上的对齐方式，常用于水平分布子元素；align-items 控制交叉轴（默认为纵轴）上的对齐，决定垂直对齐效果。
在表单布局中，若多个控件未对齐，通常是因为：
- 各控件默认高度或 vertical-align 不一致
- 父容器未统一行高或盒模型
- 部分控件如 select 或 button 存在浏览器默认外边距或内边距
使用 Flexbox 统一表单控件对齐
将包含表单控件的容器设为 flex 容器，并设置对齐属性：
立即学习“前端免费学习笔记（深入）”；
.form-row {
display: flex;
align-items: center; /* 垂直居中对齐所有控件 */
justify-content: flex-start; /* 水平方向从左开始排列 */
gap: 10px; /* 控件间留出间距，推荐使用 */
}
这样 input、select、button 等元素会自动在垂直方向上对齐，避免因基线或高度差异导致的“错位”现象。
关键细节处理
仅靠 Flexbox 属性还不够，还需注意以下几点：
- 重置控件的 margin 和 padding：不同浏览器默认值不同，建议统一设置
- 设置 box-sizing: border-box：确保尺寸计算一致
- 统一字体和行高：避免文本基线偏移影响对齐
input, select, button {
margin: 0;
padding: 8px;
font: inherit;
line-height: 1.5;
box-sizing: border-box;
}
基本上就这些。用 Flexbox 结合样式重置，能从根本上解决表单控件对齐异常的问题，兼容性和维护性都更好。
