flex-wrap: wrap 配合 flex-basis 可控折行，推荐 flex: 0 0 250px；gap: 0 是消除按钮间隙的唯一可靠方式；主轴方向与 justify-content 结合实现响应式对齐；align-items: center 解决换行后垂直对齐问题。
flex-wrap: wrap 配合 flex-basis 控制折行时机
按钮组在宽度不足时自动换行，关键不是靠媒体查询硬切，而是让每个按钮“知道自己该在哪折”。flex-basis 设为固定值（比如 250px）比百分比更可控，尤其当容器有 padding 或 border 时，width: 25% 容易因小数精度或盒模型误差导致第四项被挤到下一行。
常见错误是只写 flex: 1 或 flex: 1 1 auto，这会让按钮强行拉伸填满剩余空间，失去折行判断依据。正确做法是显式设收缩基准：
-
flex: 0 0 250px：不放大、不缩小、基准宽 250px —— 最稳妥，适合内容长度接近的按钮 -
flex: 0 0 calc(100% / 4)：适合严格四列均分，但需确保父容器无内边距干扰 - 搭配
min-width: 0防止长文本撑开容器（尤其含图标或动态文案时）
gap: 0 是消除按钮间隙的唯一可靠方式
即使重置了所有 margin 和 padding，按钮间仍有像素级缝隙？那大概率是 HTML 换行符被解析成了空白文本节点，而你没对按钮的直接父容器启用 Flex 布局。
gap 是原生布局属性，它不依赖 margin、不响应空白字符、不触发重排陷阱。设为 0 就是真的零间距：
立即学习“前端免费学习笔记（深入）”；
- 必须作用于按钮的**直接父容器**（如
.calcKeys），不是外层.calculator - 不要用负
margin模拟 gap 归零 —— 在缩放、打印、高 DPI 屏幕下会出错 - 如果未来要加间距，优先用
gap: clamp(0px, 1vw, 4px)，比媒体查询更轻量
justify-content + flex-direction 应对左右对齐与堆叠切换
大屏左右对齐、小屏垂直堆叠，不需要两套 DOM 结构。核心是控制主轴方向和项目分布：
- 默认用
flex-direction: row+justify-content: space-between实现左右锚定 - 小屏下改
flex-direction: column，此时justify-content控制的是垂直方向，可配align-items: stretch让按钮等宽 - 避免用
float或position: absolute—— 它们脱离文档流，无法响应flex-wrap和gap - 若需左侧一组、右侧一组（如导航栏），把左右两组各自包成
div，再用display: flex外层容器分配空间
响应式折行后对齐失效？检查 align-items 和 min-width
换行后按钮高度不一致、文字上下偏移？通常是因为没设 align-items，或者子元素内部内容（如图标+文字）未约束尺寸。
典型表现：button 内含 SVG 图标时，图标默认 vertical-align: baseline，拖低整体基线。解决方案很直接：
- 容器加
align-items: center（主轴为 row 时控制交叉轴即垂直居中） - 按钮内图标统一设
vertical-align: middle或用display: flex+align-items: center - 按钮本身加
min-width: 0，防止 flex item 默认最小宽度干扰折行逻辑
gap 和 flex-basis 的组合看似简单，但一旦混入 border、padding、字体渲染差异或动态内容，就容易在某台设备上突然错位。最稳的做法：先关掉所有 margin/padding，用 gap 控制间距，用 flex-basis 定折行点，最后用 align-items 统一交叉轴对齐 —— 其他都是补丁。
