justify-content: space-between;如何调整元素间距

`justify-content: space-between;` 是CSS Flexbox布局模式中的一个属性，用于调整行内的项目之间的空间分布。当应用于项目的主轴（通常为水平方向，除非设置了`flex-direction: column;`）上时，这个属性会让每个项目均匀分布，同时在最后一个项目和容器边缘之间留出最大的空白。

例如，假设你有一个包含三个`<div>`元素的容器，当你设置`justify-content: space-between;`时，这三个`div`将会平均占据可用的空间，而两两之间会有相等的间隔。第一个`div`与左边的距离等于所有间隔之和，而最后一个`div`与右边的距离最小，只有一份间隔。

下面是一个简单的例子：

<style>
.container {
  display: flex;
  justify-content: space-between;
  height: 100px; /* 仅为了示例 */
}

.item {
  background-color: lightblue;
  width: 100px;
  height: 100px;
}
</style>

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

在这个例子中，你会看到`Item 1`靠左，`Item 3`靠右，`Item 2`在中间，而且`Item 2`和`Item 1`之间以及`Item 3`和`Item 2`之间都有相同的间距。