直接给input加flex-grow:1无效，因其默认min-width:auto（约120px）锁死伸缩；必须父容器display:flex+width:100%，input设min-width:0，按钮设flex-shrink:0。
直接给 input 加 flex-grow: 1 不行，它会被浏览器默认的 min-width: auto 锁死——哪怕父容器是 display: flex，输入框也卡在约 120px 拒绝收缩或撑满。
为什么搜索框和按钮总在小屏下错位或换行
常见现象：宽屏正常，一缩到手机尺寸，按钮突然被压扁、输入框留白、甚至整行换行。这不是 Flex 失效，而是两个关键行为没控住：
-
input是替换元素，默认有最小固有宽度（Chrome 下约 120px），flex-grow对它无效，除非显式加min-width: 0 - 按钮若没设
flex-shrink: 0，小屏空间紧张时会被压缩，文字挤成一团，或触发换行 - 父容器若没设
width: 100%或max-width: 100%，可能继承了过宽祖先宽度，导致 Flex 子项计算失准
必须写的三行核心 CSS
这三行不是“可选优化”，是让 Flex 在搜索框场景下真正工作的底线配置：
- 父容器：
display: flex+width: 100%（防继承溢出） -
input：flex: 0 1 0+min-width: 0（不主动放大、可收缩、基准为 0） -
button：flex-shrink: 0（或flex: 0 0 auto），再加white-space: nowrap防文字折行
移动端键盘弹出后布局崩塌怎么办
iOS 键盘顶起页面时，vh 失效、视口高度突变，Flex 容器失去高度基准，flex-grow 直接归零。这不是样式问题，是环境突变：
立即学习“前端免费学习笔记（深入）”；
- 别依赖
min-height: 100vh做父容器高度约束 - 确保
<head>里有<meta name="viewport" content="width=device-width, initial-scale=1">，否则 iOS 会强制缩放 - 焦点态避免改
padding或border，用box-shadow模拟，且始终用box-sizing: border-box
对齐问题别靠 vertical-align 硬凑
input 和 button 默认盒模型不一致：一个可能是 content-box，一个用了 UA 默认 padding；line-height、font-size、甚至 border 的缺省值都不同。强行调 margin 只会让问题更隐蔽：
- 全局或至少对表单元素加
box-sizing: border-box - 父容器设
align-items: stretch（Flex 默认值），让两者自然等高 - 按钮若文字偏高，单独设
font-size: 1rem+line-height: 1.2，别让它继承父级不可控字体
最常被忽略的不是 flex 属性本身，而是 min-width: 0 这一行 —— 它不是锦上添花，是让整个自适应逻辑启动的开关。
