用gap属性在父容器设gap: 8px可均匀分隔按钮；IE不支持则用margin-right和:not(:last-child)；按钮宽度不一用flex: 1均分或flex: 0 0 auto保留内容宽；移动端需足够padding和min-height保障点击区域；响应式需flex-wrap: wrap配合flex-basis计算列宽。
按钮组默认挤在一起，怎么用Flexbox均匀分隔
Flexbox 是最直接的解法，但很多人直接写 display: flex 后发现按钮还是紧贴着——问题出在没处理子元素的 margin 或 flex 项间距。CSS 没有原生的“gap for flex”（旧版浏览器），得靠 gap 属性或手动加 margin。
-
gap最干净：在父容器上设gap: 8px，所有按钮间自动等距，且不干扰首尾外边距 - 兼容性注意：IE 完全不支持
gap，如需支持 IE，改用margin-right+:not(:last-child)组合 - 别对每个按钮单独设
margin，容易和外部布局冲突；统一由容器控制间距更可控
按钮宽度不一致时，如何让它们视觉对齐又保持可点击区域
文字长度不同导致按钮宽度参差，强行设 width: 100% 会破坏语义和响应性。Flexbox 的 flex 属性比固定宽更合适。
- 给按钮加
flex: 1：均分容器宽度，适合「确定/取消」这类成对按钮 - 用
flex: 0 0 auto（即不伸缩、不压缩、按内容宽）+gap：保留各自宽度，只管间距，更符合操作按钮常见形态 - 避免
min-width硬设，否则小屏下易换行或溢出；可用flex-wrap: wrap配合媒体查询兜底
点击区域太小，移动端点不准怎么办
按钮文本小、padding 不足，是移动端误触主因。Flexbox 不解决点击区域问题，得靠内边距和最小尺寸配合。
- 按钮必须设
padding，至少padding: 8px 16px；移动端建议padding: 12px 20px - 别只依赖
font-size控制大小，min-height和min-width才保障可点性，例如min-height: 36px - 如果用图标按钮，确保
width和height显式设置，否则 Flexbox 可能压缩到不可点
按钮组在不同屏幕下错位或换行异常
Flex 容器默认 flex-wrap: nowrap，超宽就溢出隐藏，而不是友好换行。响应式不是加个媒体查询就行，得从 flex 行为本身入手。
立即学习“前端免费学习笔记（深入）”；
- 先设
flex-wrap: wrap，再用justify-content: flex-start避免换行后右对齐 - 按钮设
flex-basis: calc(50% - 4px)（配合gap: 8px）可实现两列布局，比纯百分比更稳 - 慎用
flex: 1在小屏下：均分可能导致单个按钮过窄，文字折行难读；此时应切回flex: 0 0 100%垂直堆叠
Flexbox 排列按钮看着简单，真正卡住人的往往是 gap 兼容性、点击热区和换行逻辑这三块——它们不报错，但一上线就表现诡异。
