直接给form设display:flex会出错，因为form子元素语义上非同级并列，需用.form-row等容器包裹label+控件；label应设flex:0 0 120px，input等统一height:36px，星号用*加margin-left:4px；IE11不支持gap、calc()及部分flex属性，须降级为margin和固定宽。
为什么直接给 form 设 display: flex 会出错
因为 form 默认是块级容器，但它的子元素（label、input、textarea、select）语义上不是同级并列项——有些要配对，有些要跨行，有些要独占整行。直接对 form 应用 display: flex，会导致所有控件强行挤在一行，textarea 高度失效、button 被拉伸、多行文本域被压扁。
真正该设 display: flex 的，是每组「标签 + 控件」的包裹容器，比如 .form-row 或 .field-group。
- 每组必须用独立
div包裹label和控件，不能让label和input在form下直接平级 -
label建议设flex: 0 0 120px（固定宽），避免文字长时撑开整行 -
input、select、textarea统一设height: 36px或min-height: 36px，否则align-items: center失效 - 必填星号用
*放在label内，加margin-left: 4px，别用空格或伪元素——后者在 flex 中易错位
不规则宽度怎么控制：flex-basis vs width
表单里常有「姓名（窄）+ 手机号（窄）+ 邮箱（宽）+ 地址（超宽）」这种混合宽度需求。靠 width 硬设会破坏响应式，靠 flex: 1 又容易把窄字段拉得太宽。
更稳的做法是用 flex-basis 配合 flex-grow 和 flex-shrink 三元组合：
立即学习“前端免费学习笔记（深入）”；
- 姓名/手机号这类固定尺寸字段：
flex: 0 0 120px（不伸缩、不收缩、基础宽 120px） - 邮箱这类中等弹性字段：
flex: 1 1 240px（可伸可缩，基准 240px） - 地址文本域这类需占满剩余空间的：
flex: 1 0 320px（只伸不缩，基准 320px） - 绝对不要只写
flex: 1—— 它等价于flex: 1 1 0%，会导致所有字段从 0 开始拉伸，窄字段反而比宽字段更“贪”空间
跨行、跨列、垂直居中怎么不翻车
不规则表单常有「一个 label 对应两个 input（如省+市下拉）」或「textarea 要占两行高」的情况。这时候不能靠 margin-top 或 position: relative 硬调，会破坏 flex 流。
- 多控件同行：把它们包进同一个
div，该div设display: flex，再分别设各自flex值 -
textarea占两行高：不靠height: 72px，而用min-height: 72px+resize: vertical，保留用户拉伸能力 - 按钮需要底部右对齐：父容器设
display: flex; flex-direction: column;，按钮加align-self: flex-end，别用text-align: right - 遇到高度不一致的控件（比如带图标的
input），统一用align-items: center在行容器上，而不是单独调每个控件的margin
IE11 兼容时 flex 哪些写法必须砍掉
IE11 支持 display: flex，但不支持 gap、flex-wrap: wrap（部分场景）、align-self（某些值）、以及 flex: 0 0 calc(...) 中的 calc()。
- 替换
gap: 12px→ 改用margin-right和margin-bottom，并在最后一项加margin-right: 0 - 禁用
flex: 0 0 calc(50% - 6px)→ 改为width: 49%或固定像素值（如width: 220px） -
align-self: center在 IE11 中对textarea失效 → 改用display: table-cell; vertical-align: middle回退（仅对该元素） - 所有 flex 容器必须显式设
flex-direction: row（IE11 默认值不可靠）
不规则表单最难的不是写样式，而是决定哪些地方必须「放弃弹性」来换兼容性——比如省市区三级联动，宁可用固定宽度分三段，也别赌 calc() 在旧浏览器里的表现。
