怎样用CSS Flex实现搜索框按钮等宽布局_设置flex-grow分配剩余空间-css教程-PHP中文网

flex:1导致搜索框与按钮不等宽，是因为flex:1等价于flex:1 1 0%，需父容器display:flex且子项无min-width干扰；button默认min-width:min-content会破坏等分，须设min-width:0（iOS Safari改用1px），并配合white-space:nowrap等约束内容。

怎样用css flex实现搜索框按钮等宽布局_设置flex-grow分配剩余空间

为什么搜索框 + 按钮组合用 `flex: 1` 会不等宽

常见现象是：输入框文字多时变宽，搜索按钮被压窄，甚至换行或溢出。这不是 Flex 失效，而是 flex: 1 默认等价于 flex: 1 1 0% —— 它让元素从“内容宽度为 0%”开始分配剩余空间，但前提是父容器已设 display: flex，且子项没被 white-space: nowrap、min-width: auto（尤其是 button 元素的浏览器默认行为）或固定 width 干扰。

搜索框和按钮必须共用同一 flex 容器

不能把 input 和 button 分开包裹在不同块级元素里再 flex，否则它们不在同一主轴上下文中，flex: 1 无法协同分配。正确结构是：

<div class="search-group">
  <input type="text" placeholder="搜索..."><button>搜索</button>
</div>

对应样式必须包含：

.search-group { display: flex; }
.search-group input, .search-group button { flex: 1 1 0; }（显式写全更稳）
.search-group input { min-width: 0; }（input 通常没问题，但加了更保险）
.search-group button { min-width: 0; }（关键！Chrome/Safari 对 button 有隐式 min-width: min-content）

按钮文字过长导致换行或撑宽怎么办

搜索按钮若含图标+文字（如 “? 搜索”），默认可能换行，破坏等宽。此时不能只靠 flex，要约束内容渲染：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

给 button 加 white-space: nowrap 防止文字折行
加 overflow: hidden; text-overflow: ellipsis; 控制溢出（需同时有 min-width: 0）
避免在 button 内套 span 再设 text-align —— text-align 在 flex-basis: 0 下失效，改用 display: flex; justify-content: center; align-items: center;
若用 SVG 图标，别依赖 vertical-align，统一用 Flex 居中