在html中如何使用flex定位使四个小盒子位于一个大盒子的四个角落

在HTML中使用Flex布局让四个小盒子位于大盒子的四个角，你可以这样做：

首先，在包含所有小盒子的大容器上设置`display: flex;`属性，并指定`justify-content: space-between;`和`align-items: flex-end;`。这样会使得小盒子均匀分布在主轴（这里是横轴）上，并将它们沿着纵轴（这里是向下方向）放置到两端。

然后，对于每个小盒子，你需要添加一些CSS样式来调整其大小和定位。例如，假设小盒子默认宽度都是相同的，可以给他们统一的宽度，并分别设置`margin: auto 0;`来保持他们在各自位置上居中对齐。如果想要放在左上角和右下角，可以直接给它们负的`left`和`top`值，其他两个角落则使用正的值。

这是一个简单的示例：

<div class="container">
  <div class="box box-top-left">左上</div>
  <div class="box box-top-right">右上</div>
  <div class="box box-bottom-right">右下</div>
  <div class="box box-bottom-left">左下</div>
</div>

.container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 200px; /* 或者自适应高度 */
  width: 400px; /* 或者自适应宽度 */
}

.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: auto 0; /* 横向居中 */
}

/* 对于特定的角落定位 */
.box-box-top-left,
.box-box-bottom-right {
  left: -50px; /* 负值使它向左偏移 */
}

.box-50px; /* 负值使它向上偏移 */
}