search-bar-wrapper 必须设为 display: flex 才能使 justify-content 或 margin-left: auto 生效；仅给 button 加 float: right 或 margin-right: auto 无效，因 input 和 button 不在同一 flex 上下文中；align-items: center 可解决高度错位，flex-wrap: nowrap 和 flex-shrink: 0 防止响应式换行与压缩。
search-bar-wrapper 必须设为 flex 容器
直接给 button 加 float: right 或 margin-right: auto 无效，因为按钮和 input 不在同一个 flex 上下文中。真正起作用的是包裹它们的父容器 —— 必须显式声明 display: flex，否则所有 justify-content / margin-left: auto 都不生效。
常见错误是只给 input 或 button 单独加样式，却忘了容器本身没启用 Flex 布局。浏览器会按普通文档流渲染，按钮自然“掉下来”或换行。
-
search-bar-wrapper是唯一需要设display: flex的元素 - 避免对
input或button设置float、display: block等破坏 inline-flex 行为的样式 - 若容器有
width: 100%但未设box-sizing: border-box，内边距可能撑破宽度，导致按钮被挤到下一行
justify-content: flex-end 还是 margin-left: auto？
两者都能让按钮靠右，但适用场景不同：justify-content: flex-end 会让整个子元素组（input + button）整体右移；而 margin-left: auto 是把按钮“推”到 input 右侧紧邻位置，更适合输入框+按钮这种并排组合。
如果搜索栏里只有两个元素（input 和 button），优先用后者 —— 它更稳定，且不会因响应式断点导致按钮突然跳到最右边缘而脱离输入框。
- 用
margin-left: auto时，只加在button上，input保持默认 margin - 若后续要加图标或 loading 状态，
margin-left: auto更容易扩展（比如加个span在 button 左侧） -
justify-content: flex-end在多元素容器中更合适，比如导航栏里一堆链接 + 一个搜索按钮
input 和 button 高度不一致怎么办
默认情况下，input[type="text"] 和 button 的 line-height、padding、border-width 往往不同，视觉上看起来“错位”。这不是对齐问题，而是基线对齐（baseline alignment）造成的假象。
解决方法不是硬调 height，而是统一垂直对齐方式。Flex 默认是 align-items: stretch，但某些旧版浏览器或重置样式后可能失效。
- 给
search-bar-wrapper加align-items: center（最简解法） - 避免给
input设vertical-align: middle—— 在 flex 容器中无效 - 如果用了 Font Awesome 图标，
<i></i>标签默认是 inline 元素，需设vertical-align: middle或改用display: flex包裹图标
响应式下按钮被截断或换行
小屏幕时，input 宽度设为 100% 但没限制最小宽度，按钮可能被压缩到看不见，或因容器太窄触发 flex 换行（尤其当没设 flex-wrap: nowrap）。
这不是 bug，是 flex 默认行为：当内容总宽超过容器，它会尝试缩小子项。但用户要的是“按钮始终可见且紧贴输入框右侧”，不是“自动缩放”。
- 给
search-bar-wrapper加flex-wrap: nowrap - 给
input设min-width: 120px（或根据实际最小可用空间调整） - 给
button设flex-shrink: 0，防止它被 flex 压缩 - 移动端可考虑隐藏按钮，改用 submit 触发图标内嵌在 input 右侧（用
position: absolute），但这已是另一套交互逻辑
search-bar-wrapper 当成纯视觉容器，却没意识到它承担着布局控制权 —— 它的 display、align-items、flex-wrap 这三个属性，比里面任何单个元素的样式都关键。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
