表单字段横排时应让整个表单区域作为flex容器，所有label和input为其直接子项，并设置flex-wrap: wrap与align-content: flex-start以确保多行对齐；需显式控制flex-basis（如label设flex: 0 0 100px）、避免width: 100%与flex: 1冲突、统一box-sizing: border-box，并用order调整视觉顺序而不影响语义。
表单字段横排时，label 和 input 必须同级容器
直接给每个 label + input 单独套 display: flex 是最常见错误。这样会导致每组宽度基准不一致，尤其在文字长度差异大或输入框有默认 min-width 时，视觉上严重错位。
正确做法是让整个表单区域（比如 <form></form> 或一个 <div class="form-row">）作为 Flex 容器，所有 <code>label 和 input 都是它的直接子项：
.form-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
这样它们共享同一套 flex 计算逻辑，对齐才可控。
- 不要用
float或inline-block混搭，会破坏 flex 上下文 - 避免给
input设width: 100%，它和flex: 1冲突，尤其在换行后 - 若 label 文字过长需截断，记得加
min-width: 0防止溢出
小屏幕下必须启用 flex-wrap 并配 align-content
地址栏拆成「省/市/区/街道」四字段，窄屏下强行 flex-direction: row 会横向滚动或内容被裁剪——这不是 bug，是你没开换行。
flex-wrap: wrap 是必须项，但只写它还不够：换行后新行默认顶到容器顶部，和上一行 baseline 不齐，看起来像“一高一低”。
补上 align-content: flex-start 才能让各行顶部对齐：
.form-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
gap: 8px;
}
-
align-content只在多行时生效，单行无效 - 别用
wrap-reverse，除非做 RTL 表单且明确需要反向堆叠 - 移动端优先？不如用媒体查询切回
flex-direction: column更稳妥
label 和 input 宽度不对齐，本质是 flex-basis 不统一
设了 flex: 1 还歪？因为默认 flex-basis: auto，浏览器按内容宽度算，label 长短不一，input 又受 min-width 影响，结果就是“看着像等分，实际各算各的”。
解决办法是显式控制基准值：
label {
flex: 0 0 100px; /* 不伸缩、不收缩、固定宽 */
}
input,
select,
textarea {
flex: 1; /* 剩余空间全给它 */
}
- 固定 label 宽度比用
text-align: right+width更可靠，不受文字长度干扰 - 确保父容器用了
box-sizing: border-box，否则 padding/border 会撑出额外宽度 - Safari 对
input默认尺寸处理较特殊，加min-width: 0能规避部分渲染偏差
复杂表单中穿插复选框组，order 属性比改 HTML 更安全
注册页中间插个「同意条款」<fieldset></fieldset>，用 flex-direction: column 时它常被挤到底部——不是代码错，是文档流顺序决定的。
用 order 调整视觉顺序，不用动 HTML 结构，也不影响语义和可访问性：
.form-group.terms {
order: 2;
}
.form-group.submit {
order: 3;
}
-
order默认是 0，数值越小越靠前 - 配合媒体查询可做响应式排序，比如小屏把提交按钮提到条款前面
- 慎用负数
order，容易和其他项目冲突，建议从 0 开始递增编号
Flex 表单最难的从来不是语法，而是忘记所有子项都在共享同一个 flex 上下文——一旦混入非 flex 子项、手动 width、未设 box-sizing 或忽略 Safari 的默认行为，对齐就会立刻崩掉。
