flex: 1 不生效的根源是 input 默认 min-width: auto（约120px），需显式设 min-width: 0 才解锁收缩；父容器须 width: 100%，按钮加 flex-shrink: 0，小屏切 column 布局并配 width: 100% 和 align-self。
直接用 display: flex 就能实现，但“自适应”真正卡住人的从来不是居中或排列，而是 <input> 死守 120px 最小宽度、按钮悄悄撑开、小屏下换行错乱——这些必须靠显式约束破局。
为什么 flex: 1 给了却不见输入框伸缩？
不是 Flex 没生效，是浏览器给 <input> 设了隐形枷锁：
-
<input>是替换元素，默认min-width: auto（Chrome/Safari 实测约 120px），flex: 1分配空间时先被它拦腰截断 - 父容器没设
width: 100%或max-width: 100%，导致 flex 剩余空间计算失准（尤其嵌套在div里时） - 同级按钮没加
flex-shrink: 0，小屏下它被压缩，反而把<input>挤得更窄 - 全局样式或 UI 库偷偷加了
width: 100%或!important，直接覆盖 flex 规则
让输入框和按钮真正协同自适应的最小配置
这不是调一个属性的事，而是一组必须同时存在的约束：
- 父容器设
display: flex+width: 100%（切断祖先宽度继承链） -
<input>必须同时写flex: 1和min-width: 0——缺一不可，flex: 1提供分配能力，min-width: 0才真正解锁收缩权限 - 按钮加
flex-shrink: 0，防止它在窄屏下被压扁变形 - 统一
box-sizing: border-box+ 显式line-height，避免默认边框/内边距导致高度不齐
小屏下按钮换行总出问题？别硬掰 Grid
用 grid-auto-flow: row 或强行改 grid-column 容易在 iOS 上失效。更稳的解法是媒体查询里切回 Flex 垂直流：
立即学习“前端免费学习笔记（深入）”；
- 小屏媒体查询中，父容器改用
flex-direction: column -
<input>改为width: 100%（此时安全，因脱离主轴分配） - 按钮加
align-self: flex-start或center控制对齐，避免默认拉宽 - 务必检查
<meta name="viewport" content="width=device-width, initial-scale=1">是否存在，否则 iOS 键盘弹出时vh失效，整个 flex 高度坍缩
最常被忽略的其实是 min-width: 0 这一行——它不显眼，但没它，flex: 1 就是纸上谈兵。
