按钮组移动端不均分、有缝隙，应设父容器display: flex且flex-wrap: nowrap，子按钮统一flex: 1 0 0、min-width: 0、white-space: nowrap，并清除默认margin及避免混用width。
按钮组在移动端不均分、有缝隙怎么办
直接用 flex: 1 给子项设为等宽，常因父容器未设 display: flex 或子项存在默认 margin/padding 导致错位。更隐蔽的问题是：部分按钮含文字换行或图标后，flex: 1 会强制拉伸内容区域，造成文字溢出或图标变形。
实操建议：
- 父容器必须显式声明
display: flex，且推荐加flex-wrap: nowrap防止意外折行 - 每个按钮统一设
flex: 1，同时加min-width: 0（防止内容过长时 flex 项不收缩） - 移除按钮默认的
margin（如button在某些 UA 样式中带margin: 0.3em） - 若按钮内含图标 + 文字，用
white-space: nowrap防止文字断行破坏等宽结构
为什么用 flex: 1 而不是 width: 33.33%
width: 33.33% 在多按钮场景下看似简单，但实际在移动端极易失效：iOS Safari 对小数百分比渲染存在舍入误差；当按钮数量动态变化（比如 2 个或 4 个）时需手动改 CSS；更关键的是，它无法响应父容器 padding 或 border 变化，容易出现横向滚动条。
flex: 1 的本质是「剩余空间均分」，天然适配不同数量按钮，且自动规避盒模型干扰。但要注意：
-
flex: 1是flex-grow: 1; flex-shrink: 1; flex-basis: 0的简写，其中flex-basis: 0是关键——它让所有项从零宽度开始均分，避免内容尺寸影响分配逻辑 - 若某按钮需「略宽」（如主操作按钮），可单独设
flex: 2，其余仍为flex: 1，比例即生效 - 不要混用
width和flex，否则width会覆盖flex-basis，导致均分失效
Android WebView 和 iOS Safari 的兼容性差异
老版本 Android WebView（如 4.4）对 flex: 1 支持不完整，常见表现是按钮高度塌陷或宽度归零；iOS Safari 在 input[type="button"] 上有时忽略 flex，需显式替换为 button 元素。
稳妥做法：
- 加前缀兼容：对父容器补充
display: -webkit-flex和display: -ms-flexbox - 按钮元素统一用
<button></button>，避免<input type="button">—— 后者在部分 WebView 中无法继承 flex 行为 - 测试时禁用缩放：
meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"，否则双击缩放可能触发重排导致 flex 计算异常
按钮文字过长时被截断或撑开布局
这是最常被忽略的细节：flex: 1 控制的是容器宽度，但文字本身仍按自然流排布。一旦按钮内文字超长，默认会撑开容器或换行，破坏等宽效果。
解决方案要分情况：
- 允许截断：加
overflow: hidden; text-overflow: ellipsis; white-space: nowrap，并确保父按钮有min-width: 0 - 允许换行但保持等宽：去掉
white-space: nowrap，改为word-break: break-word，同时设height: auto避免固定高剪裁 - 图标+文字组合：图标用
flex-shrink: 0锁定不压缩，文字区域用flex: 1; min-width: 0保证可收缩
真正麻烦的从来不是怎么写 flex，而是按钮里那行文字到底要不要换行、截断、还是缩放——这些决策得看业务优先级，CSS 只负责执行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
