CSS 如何均匀间距多个 inline-block 元素

在本文中，我们将介绍如何使用 CSS 实现均匀间距多个 inline-block 元素的布局。

阅读更多：CSS 教程

使用 flexbox 布局实现均匀间距

Flexbox（弹性盒子）是一种强大的 CSS 布局模型，可以方便地实现元素的均匀间距布局。以下是使用 flexbox 实现的示例代码：

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

.item {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: blue;
}

在上述代码中，我们将多个 inline-block 元素包裹在一个 flex 容器（.container）中，通过设置容器的 justify-content 属性为 space-between，使得元素在容器内均匀分布并且保持间距。

使用 text-align 属性实现均匀间距

除了使用 flexbox 布局，我们还可以使用 text-align 属性实现元素的均匀间距布局。以下是使用 text-align 实现的示例代码：

.container {
  text-align: justify;
}

.container::after {
  content: '';
  display: inline-block;
  width: 100%;
}

.item {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: blue;
}

在上述代码中，我们将多个 inline-block 元素包裹在一个容器（.container）中，并通过设置容器的 text-align 属性为 justify 实现元素的均匀间距布局。此外，我们使用了一个伪元素 ::after 来强制换行并且填充剩余的空间，确保元素布局的均匀性。

使用 CSS Grid 布局实现均匀间距

CSS Grid 是另一个强大的 CSS 布局模型，可以实现复杂的网格布局。以下是使用 CSS Grid 实现的示例代码：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 10px;
}

.item {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: blue;
}

在上述代码中，我们将多个 inline-block 元素包裹在一个 grid 容器（.container）中，通过设置容器的 grid-template-columns 属性为 repeat(auto-fit, minmax(100px, 1fr))，使得元素在容器内均匀分布并且根据容器宽度自动调整布局。此外，我们通过设置容器的 grid-gap 属性来控制元素之间的间距。

总结

本文介绍了三种常用的方法来实现均匀间距多个 inline-block 元素的布局。我们可以使用 flexbox 布局、text-align 属性或者 CSS Grid 布局来实现这种效果。具体选择哪种方法取决于实际需求和浏览器的兼容性要求。通过灵活运用这些方法，我们可以轻松地实现各种复杂的布局效果。