标签长度不一致导致对不齐是flex默认行为未覆盖所致，应使用flex: 0 0 120px并加flex-shrink: 0防压缩，长label需min-width: 0+word-break: break-word，input须配min-width: 0确保收缩，且label与input必须同级同容器。
标签长度不一致时，flex 布局会自动按内容宽度计算 flex-basis，导致 label 和 input 对不齐——这不是 bug，是默认行为没被覆盖。
label 宽度不统一，直接用 width 会冲突
给 label 设 width: 120px 看似简单，但和 flex 的计算逻辑打架：一旦父容器设了 display: flex，子项的 width 就可能被 flex-basis 覆盖，尤其在 Safari 或旧版 Chrome 中表现不稳定。
- 正确做法是用
flex: 0 0 120px（即flex-grow: 0、flex-shrink: 0、flex-basis: 120px） - 必须加
flex-shrink: 0，否则长 label 在窄屏下会被压缩变形 - 如果 label 文字可能超长，额外加
min-width: 0+white-space: normal+word-break: break-word
input 用 flex: 1 但必须配 min-width: 0
flex: 1 本意是“占满剩余空间”，但某些浏览器（如 Safari 15.6、iOS 15 WebKit）会给 input 默认 min-width: auto，导致它拒绝收缩，把整行撑开甚至溢出容器。
- 务必显式写
min-width: 0，这是 Safari 兼容性关键点 - 避免同时设
width: 100%和flex: 1，后者会失效 - 若 input 需最小宽度保障（如电话号输入框），改用
min-width: 160px+flex: 1，而非固定width
多行表单错位？不是 align-items 没用，是容器层级错了
常见错误是给每个 label + input 单独套一层 display: flex。这样每组独立计算高度，label 换行后整行被拉高，右侧 input 就“掉下去”了。
- 正确结构：整个表单行（如
<div class="form-row">）为 flex 容器，所有 <code>label和input是它的直接子元素 - 设
align-items: center控制垂直对齐，但 label 文字多行时要切到align-items: flex-start - 如果用了
flex-wrap: wrap，记得补align-content: flex-start，否则换行后各行顶部不对齐
最易被忽略的是：label 和 input 必须同级、同容器，且 flex-shrink: 0 和 min-width: 0 不是可选项——它们是 Safari 和移动端 flex 表单能正常工作的硬性前提。
