Flex布局可实现H5搜索框自适应：父容器flex+align-items:center，input设flex:1（移除width），取消按钮固定宽+margin-left+nowrap；聚焦时用:has()隐藏按钮并撑满，辅以44×44px点击区等移动端优化。

在 H5 移动端中，搜索框常需搭配“取消”按钮（如“取消”文字或 × 图标），且整体要适配不同屏幕宽度：输入框占满可用空间，取消按钮固定宽度、右对齐、垂直居中。Flex 布局是实现这一效果最简洁可靠的方式。

核心结构：用 flex 容器包裹 input 和 button

HTML 结构保持语义清晰，无需额外 wrapper：

• 父容器设 display: flex，主轴水平，对齐方式为 align-items: center（确保垂直居中）
• input 设置 flex: 1 或 flex-grow: 1，自动填充剩余空间
• 取消按钮（如 取消）设固定宽度，例如 width: 60px 或 min-width: 48px，并加 margin-left: 8px 保持间距

关键样式细节

避免常见陷阱：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 给 input 设 flex: 1 后，务必移除它的 width 声明（如 width: 100%），否则可能触发 flex-shrink 冲突，导致换行或溢出
• 取消按钮建议用 white-space: nowrap 防止文字折行，font-size 与 input 一致，保证视觉统一
• 若按钮是图标（如 ×），推荐用 font-size 控制大小，并设 line-height: 1 和 padding: 0 精确居中

适配小屏聚焦态的增强处理

当用户点击输入框准备搜索时，常需隐藏“取消”按钮、让 input 占满整行——此时可借助 :has()：

• 媒体查询内监听 input:focus 状态：header:has(input:focus) .cancel-btn { display: none; }
• 同时将 input 的 flex 改为 flex: 1 1 100%，或直接设 width: 100%，确保撑满
• 注意兼容性：Chrome/Edge/Safari 已支持，Firefox 暂不支持，可配合 JS fallback（如添加 class 切换）

移动端友好补充

提升触控体验：

• 取消按钮最小点击区域建议 ≥ 44×44px（iOS 规范），可通过 padding 扩展，而非仅靠 font-size
• input 添加 autocomplete="off" 和 autocapitalize="none" 减少干扰
• 整体容器加 box-sizing: border-box，避免边框/内边距破坏 flex 分配