使用Flexbox布局iPhone计算器：等号按钮致数字错位求助

核心思路是拆分容器，把数字按钮和等号按钮放到不同的flex容器里，避免同一容器内的元素相互挤压：

1. HTML结构调整 #

把数字操作区和等号按钮分开，不要混在同一个容器里：

<div class="calculator">
  <!-- 顶部功能按钮区 -->
  <div class="top-buttons">
    <button>AC</button>
    <button>+/-</button>
    <button>%</button>
    <button>÷</button>
  </div>
  <!-- 核心操作区：数字区 + 等号区 -->
  <div class="main-actions">
    <!-- 数字按钮容器 -->
    <div class="number-buttons">
      <button>7</button>
      <button>8</button>
      <button>9</button>
      <button>4</button>
      <button>5</button>
      <button>6</button>
      <button>1</button>
      <button>2</button>
      <button>3</button>
      <button class="zero">0</button>
      <button>.</button>
    </div>
    <!-- 等号按钮容器 -->
    <div class="equals-button">
      <button>=</button>
    </div>
  </div>
</div>

2. CSS关键设置 #

.calculator {
  width: 300px;
  background: #000;
  color: #fff;
}

.top-buttons {
  display: flex;
}

.top-buttons button {
  flex: 1;
  padding: 1rem;
  border: none;
  background: #aaa;
  color: #000;
  font-size: 1.2rem;
}

.main-actions {
  display: flex;
}

.number-buttons {
  display: flex;
  flex-wrap: wrap;
  width: 75%; /* 占父容器3/4宽度 */
}

.number-buttons button {
  width: 33.333%; /* 一行3个按钮 */
  padding: 1.5rem;
  border: none;
  background: #333;
  color: #fff;
  font-size: 1.5rem;
  border: 1px solid #000; /* 用同色边框模拟无间距 */
}

/* 0按钮占2/3宽度 */
.number-buttons .zero {
  width: 66.666%;
}

.equals-button {
  width: 25%; /* 占父容器1/4宽度 */
  display: flex;
}

.equals-button button {
  flex: 1;
  border: none;
  background: #f39c12;
  color: #fff;
  font-size: 1.5rem;
}

关键说明 #

• 拆分容器后，数字按钮的flex-wrap: wrap只会在自身容器内换行，完全不受等号按钮影响，7/8/9、4/5/6、1/2/3会自动整齐排列，无挤压。
• 用width: 75%和25%分配数字区和等号区的宽度，完美匹配iPhone计算器的比例。
• 按钮间的“无间距”通过添加与背景色一致的边框实现，既避免flex布局的默认间距问题，又能保持行间距正常。

如果你之前把等号和数字按钮放在同一个flex容器里，就会出现元素挤压——因为flex-wrap会让所有元素在同一容器内换行，等号占高度后会挤占数字按钮的空间。拆分容器是最直接的解决方式，还能保持布局整洁。

内容的提问来源于stack exchange，提问作者sing901