如何用CSS Flex实现表单标签与输入框对齐？

最简解是给.form-row设display: flex和align-items: center，但label与input必须同级直属于该容器；若混用float或嵌套div则flex失效；label需用flex: 0 0 120px防宽度不均，IE11需加min-height: 40px兜底。

align-items: center 是最简解，但结构必须正确

直接给 .form-row 设 display: flex 和 align-items: center 就能解决 90% 的垂直错位问题——前提是 label 和 input 必须是同一父容器的直接子元素。

1. 常见错误：把 label 套在 div 里、input 单独放一层，或混用 float，这会让 flex 完全失效
2. label 和 input 必须平级：<div class="form-row"><label>Email</label><input type="email"></div>
3. 别给 label 设 vertical-align —— flex 容器里它无效

label 宽度不一致导致 input 起始位置飘移？用 flex: 0 0 固定基准

当 label 文字长短差异大（比如“姓名” vs “确认新密码”），默认 flex-shrink: 1 会让短 label 被压缩、长 label 撑开整行，input 的左边缘就左右晃动。这不是对齐问题，是基准没统一。

1. 强制 label 不缩放：.form-row label { flex: 0 0 120px; text-align: right; padding-right: 8px; }
2. flex: 0 0 120px 比单纯写 width: 120px 更安全，避免和 flex: 1 冲突
3. 若 label 可能超长，加 white-space: normal; word-break: break-word;，别用 overflow: hidden 截断可读性
4. 别给 input 设 width: 100% —— 它会和 flex: 1 计算打架，Safari 中尤其异常

IE11 里 align-items 失效？加 min-height 是硬通货

IE11 对 align-items 的支持有 bug：父容器没明确高度时，center 经常被忽略。这不是你 CSS 写错了，是渲染引擎根本没算出交叉轴范围。

1. 最稳兜底：.form-row { min-height: 40px; }（匹配典型 input 行高）
2. min-height: 40px 是经验值，对应 font-size: 14px + padding: 8px
3. 别依赖 align-self 在 IE11 单独调 input —— 它比 align-items 更容易随机失效
4. 终极兼容方案：为 IE11 单独加 class，用 display: table-cell; vertical-align: middle;

混用 textarea/select 或 focus 时对齐偏移？优先用 align-self 控制 input

如果表单里有 textarea、select 或带图标的控件，它们默认高度不一致，align-items: center 会让文字看起来“飘”在中间。这时更适合只调 input，保留 label 的自然对齐。

1. 给 input 单独设：.form-row input { align-self: center; }
2. align-self 优先级高于 align-items，且只影响当前项目
3. focus 时 outline 或 border 变化会悄悄顶开对齐效果：统一重置 input:focus { outline: none; box-shadow: 0 0 0 2px #007bff; }
4. 确保 input 的 flex 声明显式写出三项，例如 flex: 0 1 auto，避免浏览器回退到模糊默认值

实际对齐效果是否稳定，往往取决于那几个被忽略的隐式条件：父容器有没有 min-height、label 是否真的没嵌套、input 的 box-sizing 是否为 border-box、以及 focus 状态下有没有偷偷改 border-width。这些点不检查，光调 align-items 就像拧松了螺丝还使劲拧螺母。