用 display: flex 做响应式表单，关键在于表单容器应为整行区域（如 .form-row 或 form），而非每个 .form-group；需统一 box-sizing: border-box，用 flex-basis 控制宽度，flex-wrap 配 align-content: flex-start，小屏用 order 调序。
直接说结论：用 display: flex 做响应式表单，关键不是“怎么排”，而是“谁当容器”和“谁换行”。错把每组 label+input 单独设为 flex 容器，90% 的对齐问题都由此而来。
表单容器必须是整个行区域，不是每个 label+input
常见错误是给每个 .form-group 加 display: flex，结果 label 宽度随文字变、input 又被浏览器默认 min-width 卡住，横排时高低错位、换行后间隙崩塌。
- 正确做法：让
<div class="form-row">或<form>本身做 flex 容器，所有label和input是它的直接子项 - 这样它们共享同一套
flex-basis计算逻辑，gap才可控，align-items: center才真正对齐基线 - 别在子项上混用
width: 100%—— 它会和flex: 1冲突，尤其在 Safari 中直接失效
flex-wrap: wrap 必须配 align-content: flex-start
只写 flex-wrap: wrap，换行后新行会默认顶到容器顶部，和上一行视觉错位，看起来像“一高一低”。这不是 bug，是没补对齐控制。
-
align-content: flex-start让所有行顶部对齐（注意：只在多行时生效，单行无效） - 别用
wrap-reverse，除非你明确要做 RTL 表单且需要反向堆叠 - 小屏下若想彻底切列布局，比硬撑
flex-direction: row更稳妥的做法是媒体查询里改flex-direction: column
宽度控制靠 flex-basis，不是 width 百分比
设了 flex: 1 还歪？因为默认 flex-basis: auto，浏览器按内容宽度算，label 长短不一，input 又自带最小宽度，结果就是“看着等分，实际各算各的”。
立即学习“前端免费学习笔记（深入）”；
- 显式设
label { flex: 0 0 120px }，固定标签宽度基准 - input 用
flex: 1占满剩余空间，但必须配合box-sizing: border-box - IE11 不支持简写
flex: 1，得拆成flex-grow: 1; flex-shrink: 1; flex-basis: 0; - label 文字过长需截断？加
min-width: 0防止溢出破坏 flex 流
移动端堆叠时，order 属性比 DOM 顺序更可靠
想让小屏下 label 在 input 上方、但又不想改 HTML 结构？用 order 调整视觉顺序，不影响语义和可访问性。
- 桌面端：
label { order: 0; }，input { order: 1; } - 小屏媒体查询中：
label { order: -1; }，input { order: 0; } - 别依赖
vertical-align—— 它在 flex 容器里无效，且不同字体下偏移不可控 - 如果 label 有帮助文本导致多行，改用
align-items: flex-start，再给 input 加margin-top: auto微调垂直位置
最易被忽略的点：所有子项必须统一 box-sizing: border-box，否则 padding/border 会额外撑宽，破坏 flex 分配逻辑；另外，gap 比 margin 更干净，但旧版 Safari 不支持，需 fallback 到 margin。
