CSS `space-between` 属性详解

CSS space-between 属性详解

1. 介绍

在 CSS 中，space-between 属性用于指定一个布局容器中，如何排列和分配项目之间的空间。它通过在项目之间创建均等的空白间隔来实现此效果。

这个属性可应用于弹性布局、多列布局和网格布局中的容器。

2. 语法

.container {
  display: flex; /* 声明容器为弹性布局 */
  justify-content: space-between; /* 设置项目之间的空间分配方式 */
}

3. 属性值

space-between 属性只有一个属性值：

space-between：项目之间创建均等的空白间隔，项目与容器边缘没有间隔。

4. 示范代码

4.1 弹性布局示例

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

.container {
  display: flex;
  justify-content: space-between;
}

.item {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

上述代码创建了一个包含三个项目的弹性布局容器，使用 space-between 属性实现项目之间的均等间距。每个项目的宽度和高度都设置为 100px，并且背景色为 lightblue。

4.2 多列布局示例

<div class="container">
  <div class="column">列1</div>
  <div class="column">列2</div>
  <div class="column">列3</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: space-between;
}

.column {
  height: 100px;
  background-color: lightblue;
}

上述代码创建了一个包含三列的多列布局容器，使用 space-between 属性实现列之间的均等间距。每个列的高度都设为 100px，背景色为 lightblue。

4.3 网格布局示例

<div class="container">
  <div class="grid-item">项目1</div>
  <div class="grid-item">项目2</div>
  <div class="grid-item">项目3</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: space-between;
}

.grid-item {
  height: 100px;
  background-color: lightblue;
}

上述代码创建了一个包含三个项目的网格布局容器，使用 space-between 属性实现项目之间的均等间距。每个项目的高度都设为 100px，背景色为 lightblue。