四级项目3：CSS 题目1：使用弹性盒子完成计算器案例 代码

题目1：使用CSS弹性盒（Flexbox）布局来创建一个计算器案例，你可以按照以下步骤进行：

1. **设置容器**：首先，你需要一个包含所有按钮的容器，使用display: flex; 和 justify-content: space-between; 属性使其水平居中并均匀分布。

<div class="calculator">
  <!-- 输入框和数字按钮 -->
</div>

2. **创建按钮样式**：每个按钮是一个`<button>`元素，添加flex属性，并设置宽高和背景色等样式。

.calculator button {
  flex: 0 0 50px; /* 定义固定宽度 */
  height: 50px;
  border: none;
  background-color: #ccc;
  margin: 5px;
}

3. **状态变化**：对于操作按钮（如加、减、乘、除），可以改变背景颜色或其他视觉表示其选中状态，例如使用`:hover`伪类。

.calculator button:hover {
  background-color: #aaa;
}

4. **响应式设计**：如果需要，可以添加媒体查询调整按钮在小屏幕设备上的显示，比如将宽度改为百分比。

@media (max-width: 600px) {
  .calculator button {
    flex-basis: 10%; /* 或者自适应宽度 */
  }
}