flex布局div间隔

可以使用 flex 布局的 justify-content 和 align-items 属性来控制子元素之间的间隔，同时也可以使用 margin 属性来设置子元素之间的间距。

一种常见的方式是，将 justify-content 属性设置为 space-between，这样子元素之间会均匀分布，同时也会自动计算间距。

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

<style>
.container {
  display: flex;
  justify-content: space-between;
}
.item {
  width: 100px;
  height: 100px;
  background-color: red;
}
</style>

在上面的示例中，我们将 justify-content 属性设置为 space-between，这样子元素之间会均匀分布，同时也会自动计算间距。

另一种方式是，使用 margin 属性来设置子元素之间的间距。可以在子元素的样式中设置 margin-right 或者 margin-left 属性来控制子元素之间的间距。

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

<style>
.container {
  display: flex;
}
.item {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-right: 10px;
}
.item:last-child {
  margin-right: 0;
}
</style>

在上面的示例中，我们在子元素的样式中设置了 margin-right 属性来控制子元素之间的间距，并且通过 :last-child 伪类来去掉最后一个子元素的间距，使得子元素之间的间隔保持一致。