用 display: flex 解决表单对齐需配合容器结构、轴向控制与项目行为：每组表单项应包裹在独立 .form-group 中，设为 flex 容器；默认 column（竖排），媒体查询切 row（横排）并加 align-items: center 对齐；用 gap 替代 margin 控制间距，避免 flex-wrap 导致错行。
直接用 display: flex 就能解决表单元素自动对齐问题，但关键在于容器结构、轴向控制和项目行为的配合——光加 display: flex 不够，容易出现 label 和 input 高度不一致、换行错位、小屏幕挤压失效等现象。
表单容器必须是直接父级，且子元素需为 label + input 组合
Flex 布局只作用于**直接子元素**，所以不能把整个 <form> 设为 flex 容器，而应为每组表单项（<div class="form-group">）单独设容器：
- 错误写法：
<form style="display: flex"><label>姓名</label><input></form>—— 所有 label/input 混排，无法成对控制 - 正确结构：每个
<div class="form-group">包裹一个<label>和一个<input>（或<select>/<textarea>） - 这样每组都能独立设置
flex-direction: row或column，响应式切换才可控
移动端竖排 + PC端横排：用 flex-direction + 媒体查询切换
默认小屏竖排（label 在上，input 在下），大屏横排（label 与 input 并列），靠 flex-direction 控制主轴方向：
.form-group {
display: flex;
flex-direction: column; /* 默认竖排 */
}
<p>@media (min-width: 768px) {
.form-group {
flex-direction: row;
align-items: center; /<em> 让 label 和 input 垂直居中对齐 </em>/
}
}-
align-items: center是必须的，否则 label 文字 baseline 和 input 边框底边不对齐 - 避免用
justify-content: space-between，它会让 label 贴左、input 贴右，中间空太大 - 若 label 宽度不一，可给 label 加
flex: 0 0 120px固定最小宽度，防止挤压
align-items 和 align-self 决定表单控件是否“看起来对齐”
即使设置了 flex-direction: row，input、select、textarea 默认 box-sizing 和 line-height 不同，导致视觉错位。这时候不能只调 height，要靠对齐属性：
立即学习“前端免费学习笔记（深入）”；
-
align-items: center作用于容器，让所有子项按交叉轴中点对齐（推荐） - 若某个
<textarea>需要顶部对齐，给它加align-self: flex-start - 禁用
vertical-align：Flex 项目上该属性无效，写了也白写 - 注意
input[type="checkbox"]这类内联元素，需额外设margin-top: 0.25em微调基线
换行与空间分配：慎用 flex-wrap，优先用 gap 控制间距
表单通常不需要换行（除非多列布局），flex-wrap: wrap 容易导致 label 和 input 分离到不同行。更稳妥的是用 gap 管理间距：
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem; /* 替代 margin，更干净 */
}
<p>@media (min-width: 768px) {
.form-group {
flex-direction: row;
gap: 1rem;
}
}-
gap兼容性已很好（Chrome 84+/Firefox 63+/Safari 14.1+），2026 年可放心用 - 不要同时给 label 和 input 写
margin，易叠加出意外空白 - 若需支持旧 Safari（margin-bottom +
:last-child { margin: 0 }回退
最常被忽略的是 flex-basis 和 box-sizing 的组合影响：input 默认 width: auto，在 flex 容器里可能被压缩变形；务必统一设 input, select, textarea { box-sizing: border-box; width: 100%; }，否则响应式时宽度计算会失准。
