用flex实现label与input同行对齐，需将二者包裹在display: flex且align-items: center的容器中，label设flex-shrink: 0，input设flex: 1并避免width: 100%，统一line-height和尺寸以解决基线偏移；前缀/后缀同理纳入flex流并设flex-shrink: 0；IE11兼容需用flex: 1 1 0、min-width: 0及@supports降级。
怎么用flex让label和input在一行且对齐
表单里常见的“用户名：”这种结构，如果直接写HTML默认是块级堆叠，label和input会换行。用display: flex是最干净的解法，但关键不是加了flex就行，而是得控制好容器、子元素的对齐行为。
常见错误现象：label和input上下错位、input被压缩、文字基线不齐、响应式时label换行但input没跟上。
- 把label和input包进一个
<div class="form-item">里，给这个div设display: flex和align-items: center - label默认是
display: inline，但flex容器里它会变成flex item，建议显式加flex-shrink: 0防止被压缩 - input要设
flex: 1（或flex: 1 1 auto），让它撑满剩余空间；否则可能宽度为0或固定宽 - 避免给input设
width: 100%——它在flex里会和父容器宽度冲突，导致布局异常
input前缀后缀怎么塞进同一行不破坏flex流
比如“¥元”或“@example.com”，前缀/后缀本质是文本节点或<span>，它们和input同属flex item，必须统一管理尺寸和对齐。
使用场景：金额输入、邮箱域名补全、搜索框带图标、带单位的数字输入。
立即学习“前端免费学习笔记（深入）”；
- 把前缀、input、后缀都放在同一个flex容器里，顺序即渲染顺序
- 前缀/后缀加
flex-shrink: 0，否则小屏幕下可能被压扁甚至消失 - input仍用
flex: 1，但需注意：如果前后缀太宽，input可能没空间，此时可加min-width: 0防溢出 - 避免用
position: absolute盖在input上——虽然能“看起来”有前缀，但会破坏可访问性，且focus时焦点框错位
为什么label+input用flex后文字基线总不对齐
这是最常被忽略的细节：label默认字体大小、行高、vertical-align和input的默认样式不一致，flex的align-items: center按的是容器的cross-axis中心，不是文字基线。
参数差异：input在Chrome/Firefox里默认box-sizing: border-box，但label是content-box；input还有内置padding和border，label没有。
- 统一设置
line-height: 1.5或具体数值（如line-height: 24px）在label和input上 - 给input加
vertical-align: middle没用——flex里vertical-align被忽略，必须靠align-items或margin微调 - 更稳的做法：给label加
padding-top: 2px或margin-bottom: -1px手动对齐（查浏览器渲染后actual line-height再调） - 如果用
font-size: 14px，input通常需要height: 32px才能和label视觉居中，别只信默认height
IE11兼容flex表单布局要注意什么
IE11支持flex但bug多，尤其对flex: 1解析不稳定，容易让input塌缩或溢出。不是所有项目都要兼容，但如果真要，就得降级处理。
性能影响：IE11的flex重排开销比现代浏览器高，表单项多时滚动卡顿更明显。
- 避免用
flex: 1，改用flex: 1 1 0（IE11认这个写法） - 给input加
min-width: 0，否则IE11可能无视flex计算强行撑宽 - 不要用
align-items: center配height，IE11里input高度常被截断；换成align-items: flex-start+padding-top模拟居中 - 用
@supports (display: flex)做渐进增强，IE11走display: table-cell老方案更可靠
flex-shrink没关或者min-width漏了。 
