用 display: flex 解决表单错位最稳妥的方法是为每个表单项（label+input）单独包裹 div 并设 flex，label 固宽 flex: 0 0 120px，input 占满 flex: 1，align-items: center 对齐，box-sizing: border-box 防撑宽。
表单 label 和 input 总是错位？用 display: flex 包一层最稳
直接给 form 或包裹容器加 display: flex 往往不管用，因为默认 flex-direction: row 会让所有子元素横排，而表单通常需要竖排 + 左对齐 label。真正有效的做法是：每个表单项（label + input）单独用一个 div 包住，再对这个 div 设 display: flex，并控制对齐方式。
常见错误是把整个 form 设成 flex 后强行用 flex-wrap 或 margin 调整，结果响应式一变就崩。按项封装才是可维护的起点。
-
label设flex: 0 0 120px（固定宽度，不缩不胀），input设flex: 1（占满剩余空间） - 容器加
align-items: center避免 checkbox/radio 和文字上下不对齐 - 别忘了设
box-sizing: border-box，否则 padding 会撑宽input
.form-item {
display: flex;
align-items: center;
margin-bottom: 12px;
}
.form-item label {
flex: 0 0 120px;
font-weight: 500;
text-align: right;
padding-right: 12px;
}
.form-item input,
.form-item select,
.form-item textarea {
flex: 1;
padding: 6px 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
为什么不用 float 或 grid？
初级项目里 float 会引发清除浮动、塌陷、响应式失效等问题，调试成本远高于 flex；grid 虽然语义更清晰，但 IE11 不支持，且初学者容易写错 grid-template-areas 或漏掉 grid-column，反而让结构更难理解。
flex 在 Chrome/Firefox/Safari/Edge（包括旧版）中兼容性足够好，且只作用于直系子元素，逻辑线性，出错时容易定位。
立即学习“前端免费学习笔记（深入）”；
- 如果项目需支持 IE10–IE11，用
display: -ms-flexbox前缀（现代工具链如 PostCSS 可自动补全） - 避免对
input直接设width: 100%—— 它在 flex 容器里会和flex: 1冲突，导致计算异常 - 多行文本域（
textarea）要额外设min-height，否则默认高度太小
遇到 checkbox/radio 对不齐 label 怎么办？
这类控件默认基线（baseline）和文字不一致，单纯用 align-items: center 有时仍偏上或偏下。根本解法是统一用 align-items: flex-start + 手动调 label 的 padding-top，或者更稳妥地：把 input[type="checkbox"] 和 label 放进同一个 flex 容器，并设 align-items: center，同时给 input 加 margin-right: 8px。
- 不要用
vertical-align: middle—— 在 flex 容器里它被忽略 - 若 label 文字换行，加
white-space: normal并确保容器有足够宽度 - 移动端小屏下建议改用
flex-direction: column，此时 label 自然在上，input 在下
.form-item--checkbox {
display: flex;
align-items: center;
}
.form-item--checkbox input[type="checkbox"] {
margin-right: 8px;
margin-top: 0;
}
.form-item--checkbox label {
flex: 1;
white-space: normal;
}
响应式断点里 label 宽度怎么调？
硬编码 120px 在手机上肯定太宽。应该用媒体查询动态改 flex-basis，而不是改 width —— 因为 flex 容器里 width 优先级低于 flex-basis。
- PC 端保持
flex: 0 0 120px - 768px 以下设
flex: 0 0 100px - 480px 以下设
flex: 0 0 auto+text-align: left，让 label 自适应内容宽度 - 千万别在媒体查询里写
width: 100%，它会覆盖flex-basis导致布局断裂
box-sizing 和 font-size 是否一致，再动 flex。 
