Flex布局中input与button宽度不均、换行错乱的主因是未控制伸缩行为及IE11兼容性问题；需设input为flex: 1 1 0（IE11拆写）、min-width: 0，button为flex: 0 0 auto，统一box-sizing: border-box，并微调border-radius与gap。
Flex布局下input和button宽度不均、换行错乱
直接用 display: flex 包住 <input> 和 <button>，但输入框被压缩、按钮撑开，或小屏幕直接换行——根本原因是没控制好伸缩行为。Flex默认让子项按内容宽度分配空间，而表单控件的默认 min-width 和 box-sizing 会干扰布局。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给容器加
display: flex+width: 100%（否则flex可能不占满父宽） - 给
<input>设flex: 1 1 0：允许拉伸、允许收缩、基准宽度为0（避免受内容影响） - 给
<button>设flex: 0 0 auto：禁止拉伸收缩，保持固有尺寸 - 务必统一设
box-sizing: border-box，否则padding/border会撑出额外宽度
移动端按钮文字溢出或被截断
按钮在窄屏上文字换行、省略号或高度突变，常见于没限制按钮最小尺寸或字体响应不匹配。Flex本身不解决文字渲染问题，但会放大未设限带来的视觉断裂。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 按钮加
white-space: nowrap防止文字换行 - 用
min-width: fit-content或具体值（如min-width: 80px）保底，避免被压缩过小 - 配合媒体查询，在小屏下调小
font-size，而不是只靠flex拉伸 - 避免对按钮设
flex: 1—— 这会让它和输入框抢空间，导致文字挤压
IE11中flex表单完全错位或塌陷
IE11对flex的支持有硬伤：不支持 flex: 1 1 0 的简写，min-width: fit-content 直接失效，且对 input 的默认 min-width 处理异常（常固定为130px左右）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- IE11必须拆开写：
flex-grow: 1、flex-shrink: 1、flex-basis: 0 - 替换
min-width: fit-content为具体像素值，比如min-width: 64px - 对
<input>显式设min-width: 0（IE11里它默认不为0） - 避免在IE11中依赖
align-items: stretch垂直对齐，改用height+line-height控制
输入框右侧圆角被按钮遮盖或衔接生硬
按钮紧贴输入框时，输入框右边缘圆角消失，或出现1px缝隙，本质是边框叠加/盒模型计算误差。Flex不会自动处理视觉衔接，得靠CSS微调。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 输入框设
border-radius: 4px 0 0 4px，按钮设border-radius: 0 4px 4px 0 - 移除两者之间的默认外边距（
margin），用gap: 0或负margin拉齐（如margin-left: -1px） - 若按钮有边框，确保和输入框边框宽度、颜色一致，否则视觉断层
- 慎用
overflow: hidden裁剪——它可能意外裁掉聚焦时的outline
min-width: 0 对 <input> 的影响，以及 IE11 下 flex 简写的兼容性断裂——这两处一漏，整个表单在部分环境就直接不可用。 
