CSS中的 space-between 属性

在CSS中，我们经常会用到一些排版属性来控制元素之间的空间，其中的 space-between 属性就是一个常用且非常实用的属性。这个属性可以帮助我们在容器中均匀地分配元素之间的空间，让整个排版看起来更加美观和整齐。

什么是 space-between 属性

space-between 是CSS中的一个排版属性，用于设置容器内的元素之间的空间分配。当我们在一个容器中使用 space-between 属性时，浏览器会自动计算容器中的元素个数和宽度，然后根据容器的宽度来平均分配元素之间的空间，让它们之间的空间保持相等。

如何使用 space-between 属性

要在CSS中使用 space-between 属性，我们首先需要定义一个包含多个子元素的容器。然后，我们可以通过设置容器的 justify-content 属性来指定元素在主轴上的对齐方式为 space-between。

下面是一个示例代码，演示了如何在CSS中使用 space-between 属性：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Space Between Example</title>
<style>
.container {
  display: flex;
  justify-content: space-between;
  background-color: #f0f0f0;
  padding: 20px;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #3498db;
}
</style>
</head>
<body>
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
</body>
</html>

在上面的示例中，我们定义了一个 .container 容器，并将其子元素的 justify-content 属性设置为 space-between。然后我们在容器中放置了三个相同大小的 .item 元素，浏览器会根据容器的宽度自动计算出元素之间的空间，并将其平均分配，最终呈现在页面上。