7试题编号：J-7页面弹性两端间隔布局1任务描述目前网页弹性两端间隔布局非常常见现要实现一个两个div盒子放在容器中让盒子左右两端间隔相等对齐的操作。你作为页面描绘的程序员请实现如下功能： 写一个容器宽300px高150px边框是宽度为1px的实线。 写两个div盒子都是边长为50px的正方形在容器中将两个盒子排列方式变成两端间隔相等对齐两个盒子之间间隔相等对齐。任务一：div盒子两端对齐70分1

（1）HTML代码：

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
</div>

（2）CSS代码：

.container {
  width: 300px;
  height: 150px;
  border: 1px solid #000;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box {
  width: 50px;
  height: 50px;
  background-color: #f00;
  margin: 0 calc((100% - 100px) / 3); /* 计算间隔距离 */
}

解释：

• 使用 flex 布局来实现盒子的对齐。
• justify-content: space-between; 可以将两个子盒子分别置于容器的两端。
• align-items: center; 可以使子盒子垂直居中对齐。
• 使用 margin 来计算子盒子之间的间隔距离，公式为：margin: 0 calc((100% - 100px) / 3);，其中 100px 是子盒子的宽度，3 是两个子盒子和两个间隔的总数。