根本原因是label和input未置于同一flex容器内；正确做法是用外层容器设display: flex、flex-direction: row及align-items: center统一基线，避免嵌套过深与width冲突，改用flex: 0 0 120px控制label宽度。
为什么表单字段横排后标签和输入框总不对齐
根本原因不是 flex 不够用，而是 label 和 input 没放在**同一个 flex 容器里**。常见错误是给每个 <div class="form-item"> 单独设 display: flex，结果各组宽度基准不统一，justify-content 也失去作用。
正确做法是让整个表单或一个 <fieldset> 做外层容器，设 display: flex; flex-direction: row;，再用 align-items: center 统一对齐基线。这样所有 label/input 对都共享同一套主轴计算逻辑。
- 避免嵌套过深：label 和 input 之间不要夹
<div>或空白字符（尤其 IE11 会把空格当文本节点参与排列） - 禁用
width直接控制 label：它会和flex-shrink冲突，小屏下文字折行、input 被顶偏 - 改用
flex: 0 0 120px控制 label 宽度——这是flex-basis的显式声明，浏览器优先采用
嵌套 Flex 容器中 align-items 为什么突然失效
align-items 只作用于当前容器的**直接子元素**，不会穿透到孙子级。比如外层设了 align-items: center，只影响中间那层 div 的位置；而这个 div 里面的 input 是否居中，取决于它自己有没有设 align-items。
典型现象：表单整体看着居中了，但某组输入框里的文字却贴着顶部或底部——问题不在外层，而在内层容器漏写了 display: flex 或 align-items。
立即学习“前端免费学习笔记（深入）”；
- 每层需独立设置：外层管“容器怎么摆”，内层管“内容怎么排”，两者无继承关系
- 如果内层是
flex-direction: column，align-items控制的是**水平对齐**（此时交叉轴是水平方向），别和justify-content搞混 - IE11 下
align-items: stretch对非块级子元素（如<img>）无效，建议显式写align-items: flex-start
响应式下横向表单换行错乱怎么办
不是 flex-wrap 没开，而是子容器没随断点重设 flex-direction。比如外层在桌面端是 row，移动端想变竖排，只改外层不够——若里面还有一层 flex 容器，它仍按 row 渲染，就会导致字段堆叠错位。
关键是要分清职责：外层容器负责“行与行之间怎么堆”，内层容器负责“这一行内部怎么排”。媒体查询必须落到具体那一层上。
- 桌面端：外层
flex-direction: column，每行.form-row自己设display: flex; flex-direction: row; - 移动端：用
@media (max-width: 768px)给.form-row改成flex-direction: column - 关键字段（如提交按钮）加
flex-basis: 100%，确保它独占一行，不受flex-wrap影响 - 避免多层同时设
flex-wrap: wrap，容易出现意外交叠，尤其 Safari 下
IE11 兼容嵌套表单时哪些 flex 写法必须避开
IE11 对嵌套 flex 的支持是断层式的：单层能跑，两层以上 + align-items + flex-wrap 组合就大概率错位或截断。这不是 bug，是规范实现不全。
最稳妥的降级策略是绕过现代语法，用明确值替代简写和隐式行为。
- 禁用
gap：IE11 完全不识别，改用margin-right+:last-child { margin-right: 0 } - 不用
flex: 1：IE11 下可能让输入框宽度为 0，必须写成flex: 1 1 0（显式声明flex-basis: 0） - 避免
align-items: center配height: 100%：IE11 常导致垂直居中偏移，改用padding或line-height微调 - 嵌套超过三层？建议拆开：IE11 计算误差随层级指数增长，三层封顶，再深就得用 JS 补位或改用 float 回退方案
display: flex 的 <div>，或者忘了在父容器上加 min-height: 0 导致 flex: 1 失效。调试时先高亮每一层容器的 computed height，比反复改 CSS 更快定位问题。 
