flex: 1 在搜索框中易出问题，因其等价于 flex: 1 1 0，默认启用 flex-shrink: 1，导致按钮与输入框一同被压缩；应改用 flex-grow: 1 配合 flex-shrink: 0 显式控制收缩行为，确保按钮不被压扁或换行。
输入框占满剩余空间、按钮固定宽度、整体右对齐——用 flex-grow: 1 比 flex: 1 更可控，但必须配合 flex-shrink: 0 防止按钮被压缩。
为什么 flex: 1 在搜索框里容易出问题
很多人直接给 input 写 flex: 1，结果在小屏或内容较长时，button 被压扁甚至换行。这是因为 flex: 1 等价于 flex: 1 1 0，其中第二个 1 表示 flex-shrink: 1，浏览器会按比例收缩所有弹性项来适应容器——按钮也不例外。
-
flex: 1会让button和input一起参与收缩计算，尤其当父容器窄于两者自然宽度之和时 - 按钮文字变多（如“搜索”→“高级搜索”）或图标字体加载延迟，都可能触发意外收缩
- 某些旧版 Safari 对
flex: 1的flex-basis解析不一致，导致初始宽度跳变
推荐写法：flex-grow: 1 + 显式控制收缩行为
只让 input 增长，明确禁止 button 缩小，逻辑更直白，兼容性也更稳。
- 给
input：设置flex-grow: 1，不设flex-shrink（默认为1，但因input通常有min-width或内容约束，实际很少收缩） - 给
button：显式写flex-shrink: 0，再加white-space: nowrap防文本折行 - 父容器保持
display: flex和align-items: stretch（默认值），确保高度拉齐
.search-box {
display: flex;
}
.search-box input {
flex-grow: 1;
min-width: 0; /* 允许极端窄屏下收缩，避免溢出 */
}
.search-box button {
flex-shrink: 0;
white-space: nowrap;
}
两端对齐 ≠ 只靠 justify-content: space-between
搜索框常见误解：以为加了 justify-content: space-between 就能自动把 input 和 button 推到两边。实际上它要求至少两个“可参与分配”的子项，而如果 button 被设了 flex: 0 0 100% 或 width: 100%，它就变成唯一占满的项，space-between 直接失效。
- 真正需要两端对齐（比如搜索框整体右对齐、内部 input 左贴边、button 右贴边），应改用
margin-left: auto放在button上 - 或者给
input加margin-right: auto，效果等价但语义更清晰 -
justify-content: space-between更适合三元素场景（如 logo + nav + user-icon），不是两元素搜索框的首选
移动端适配时最易忽略的点
小屏下按钮图标可能被截断、输入框 placeholder 溢出、甚至整个 search-box 换行——这些问题往往不是 Flex 本身的问题，而是没切断默认行为链。
- 务必给
input加min-width: 0，否则 Chrome/Firefox 会坚持维持其「最小固有宽度」，导致父容器撑宽或换行 - 按钮内图标用
<i></i>或 SVG 时，要设flex-shrink: 0和width/height固定尺寸，否则缩放不一致 - 不要依赖
box-sizing: border-box就万事大吉：iOS Safari 对input[type="search"]有额外内边距，需用-webkit-appearance: none重置
Flex 实现搜索框对齐，核心不是堆属性，而是分清谁该伸、谁该缩、谁该锁死。一旦按钮的 flex-shrink 没关，再精细的 flex-grow 都可能被浏览器悄悄覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
