flex布局实现h5顶部吸顶搜索栏的核心是结构分离+定位控制：根容器设flex-column与100vh，header自适应高度，content设flex:1+overflow-y:auto；搜索栏内部用flex排布图标、输入框（flex:1）和按钮；小屏通过媒体查询缩放元素并保障输入框可用性；sticky仅作可选增强，失效时回退flex方案。
用 Flex 布局实现 H5 移动端顶部吸顶搜索栏，核心是“结构分离 + 定位控制”，不是单纯靠 position: sticky 或 fixed 就能一劳永逸——尤其在 iOS 混合 App 场景下，sticky 可能失效，fixed 易被软键盘顶起。真正稳定的做法，是把整个视口拆成固定头部和可滚动内容两部分，再用 Flex 控制内部对齐。
用 flex-column 分离头部与内容区
给根容器设 display: flex; flex-direction: column; height: 100vh;，让页面天然分为上下两个弹性区域：
- 顶部 header：不设高度，靠内容撑开（如 logo + 搜索框 + 头像），默认占据所需空间
-
主体 content：加
flex: 1; overflow-y: auto;，形成独立滚动容器，不会带动 header 一起滚
这样既避免了 position: fixed 在 iOS 下的兼容问题，又不用监听 scroll 计算临界值，结构干净、性能友好。
搜索栏内部用 flex 实现图标+输入框+按钮一体化
搜索区域本身也用 Flex 精确排布，例如：
- 父容器
.search-wrap { display: flex; align-items: center; padding: 0 10px; } - 放大镜图标用
::before绝对定位，配合position: relative和padding-left预留空间 - input 设
flex: 1; border: none; font-size: 14px;，自动填满剩余宽度 - 右侧搜索按钮用
width: 40px;固定，不随屏幕缩放
适配小屏：媒体查询中收窄或隐藏非关键元素
在宽度 ≤ 375px 时，优先保障搜索框可用性：
- 缩小 logo 宽度或改用文字 logo
- 头像设
width: 28px; height: 28px;，圆角保持50% - 必要时隐藏右侧按钮，只保留搜索框和放大镜
- 确保
input:focus有清晰轮廓（如outline: 2px solid #007aff;），提升触控反馈
补充吸顶增强（可选）：用 sticky 包裹搜索栏本身
如果希望搜索栏在内容滚动后仍保留在视口顶部（比如页面很长、header 含 logo 但搜索栏需单独吸顶），可在搜索栏外层加一层 wrapper：
.search-sticky { position: -webkit-sticky; position: sticky; top: 0; z-index: 1000; background: #fff; }- 注意 wrapper 必须是
.header的直接子元素，且其父容器不能有overflow: hidden或transform等阻断 sticky 的属性 - 真机测试重点看 iOS Safari 和微信内置浏览器是否生效，不行就回退到 flex-column 方案
