复刻iPhone计算器时不同行按钮尺寸不一致问题求助

嘿，我仔细看了你的问题和代码，这个按钮被压缩的情况在flex布局里真的很常见！咱们来拆解一下原因，然后快速解决它～

问题根源 #

你给每个按钮设置了固定的width: 64px，但中间行有4个按钮，加上gap: 0.5rem，总宽度其实超过了.row的宽度（因为.row继承了.calc-items-width的width: 97%）。而flex布局默认的flex-shrink: 1会让元素在容器空间不足时自动缩小，这就是为什么中间行按钮变成了59.86px，而顶部/底部行按钮数量少、总宽度没超，所以能保持64px的原因。

快速解决方案 #

只需要给按钮加上flex-shrink: 0，禁止flex容器压缩它们的宽度，就能让所有按钮保持64x64的尺寸：

修改你的按钮CSS：

button {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: #696868;
  font-size: 1.5rem;
  font-weight: 700;
  color: #f3f3f3;
  text-align: center;
  flex-shrink: 0; /* 新增：禁止按钮被压缩 */
}

进阶优化（更贴近iPhone计算器布局） #

如果你想让按钮像原生计算器那样均匀填满每行的空间，用Grid布局会比Flex更省心，比如把.row的样式改成：

.row {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 每行4个等宽列 */
  gap: 0.5rem;
  padding: 0.3rem 0;
}

然后把按钮的width: 64px去掉，Grid会自动让每个按钮占满列宽，这样不管容器怎么调整，按钮都会均匀分布，完全不需要担心尺寸不一致的问题～

验证一下 #

修改后再打开DevTools检查，所有按钮的宽度应该都能保持64px（用Flex方案），或者自适应容器宽度均匀分布（用Grid方案），完美解决你的问题！

内容来源于stack exchange