默认情况下input和label在Flex容器中垂直不对齐，因表单控件baseline位置不统一且align-items: stretch下拉伸加剧错位；推荐统一box-sizing: border-box并设align-items: center（单行控件）或baseline（含textarea时微调）。
为什么 input 和 label 在 Flex 容器里垂直不对齐
默认情况下，input、select、textarea 的基线（baseline）与文本不同，它们的 vertical-align 默认是 baseline，而父容器若用 display: flex 且未设 align-items，会退回到对齐基线的行为——但表单控件的基线位置不统一，导致视觉错位。
-
input[type="text"]和button的 baseline 在框底附近，label文字的 baseline 在字体底部，二者不重合 - 在
flex布局中，align-items: stretch（默认值）会让子项拉伸填满交叉轴，但表单控件有固有高度和内边距，拉伸后反而加剧错位 - Chrome/Firefox 对
textarea的 baseline 计算略有差异，容易在跨浏览器时暴露问题
用 align-items: center 还是 align-items: baseline
多数场景下直接设 align-items: center 最省事，但要注意副作用：它会让所有子元素（包括多行 textarea 或带图标的 label）按中心对齐，可能破坏语义对齐意图。
- 如果表单控件都是单行（
input、select），align-items: center安全可靠 - 若含
textarea或需要文字基线对齐（比如旁边跟一个sup上标），改用align-items: baseline，并给表单控件加margin-bottom: -2px微调 - 不要依赖
vertical-align混合使用：Flex 容器内vertical-align无效，仅对 inline-level 元素起作用
box-sizing: border-box 必须显式设置
表单控件默认是 content-box，但现代布局常依赖统一盒模型。未设 box-sizing 会导致 padding 和 border 额外增加宽度/高度，在 Flex 或 Grid 中挤压空间，间接引发错位。
- 全局重置推荐：
input, select, textarea, button { box-sizing: border-box; } - 特别注意
textarea：它的rows属性只控制默认行数，实际高度还受height、padding和border影响；不设box-sizing: border-box时，height: 100px+padding: 8px实际占用 116px - 某些旧版 Android 浏览器对
box-sizing支持不完整，需加-webkit-box-sizing前缀（虽已基本可不写）
Label 与控件未包裹导致的“看不见”的错位
很多人把 label 和 input 写成兄弟节点，而非用 for/id 关联或嵌套，这本身不影响布局，但一旦加了 display: flex 到 label，就可能让 input 被意外包含进另一个 flex 上下文，造成嵌套对齐混乱。
立即学习“前端免费学习笔记（深入）”；
- 正确结构优先用嵌套：
<label>用户名<input type="text" name="user"></label>
- 若必须分离，确保
label和input同级，并共用同一个 flex 容器（如<div class="field"> <label>...</label><input> </div>） - 避免给
label单独设display: flex，除非你明确要对其内部图标+文字做排列
box-sizing、固定 align-items 值、避免混合 inline 和 flex 上下文——这些点漏掉任意一个，都可能让看似正常的代码在某个设备上突然错位。 
