CSS 如何在一个 div 中均匀分布元素

在本文中，我们将介绍如何使用 CSS 在一个 div 中均匀分布元素的方法。

阅读更多：CSS 教程

使用 Flexbox

Flexbox 是 CSS3 中的一种布局模型，它提供了强大而灵活的布局功能。通过使用 Flexbox，我们可以轻松地实现在一个 div 中均匀分布元素。

例如，假设我们有一个 div，其中包含了几个子元素。为了实现均匀分布，可以在父元素上应用 display: flex 属性。这将使父元素变为一个 flex 容器，并启动 Flexbox 的布局。

接下来，我们可以使用 justify-content: space-between 属性来实现元素之间的均匀分布。这个属性将会在元素之间自动分配相等的空间，使它们均匀地分布在容器中。

以下是一个示例：

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

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

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

在上面的例子中，我们将父元素的 display 属性设置为 flex，子元素 .item 的宽度和高度设置为 100px，并将背景颜色设置为蓝色。由于我们在父元素上应用了 justify-content: space-between 属性，子元素之间将会均匀地分布。

使用 Grid

CSS Grid 是另一种强大的布局模型，可以用于在一个 div 中均匀分布元素。使用 Grid，我们可以更灵活地控制元素的布局和位置。

要使用 Grid 来实现均匀分布，我们可以在父元素上应用 display: grid 属性。然后，可以使用 grid-template-columns 属性来定义每列的宽度。

例如，假设我们有一个 div，其中包含了几个子元素。我们可以通过将 display 属性设置为 grid 并使用 grid-template-columns 属性来实现均匀分布。

以下是一个示例：

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

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

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

在上面的例子中，我们将父元素的 display 属性设置为 grid。使用 grid-template-columns 属性，我们可以定义每列的宽度。repeat(auto-fit, minmax(100px, 1fr)) 的意思是每列最小宽度为 100px，最大宽度为剩余空间的 1fr。grid-gap 属性用于定义子元素之间的间距。

通过上述代码，子元素会在容器中均匀分布，并自动适应容器的宽度。子元素之间的间距由 grid-gap 属性定义。

使用 Flexbox 和 Grid 的混合布局

在某些情况下，我们可能需要在一个 div 中同时使用 Flexbox 和 Grid 来实现均匀分布。这种混合布局可以提供更多的灵活性和控制能力。

例如，我们可以先使用 Flexbox 将子元素在水平方向上均匀分布，然后再使用 Grid 将它们在垂直方向上均匀分布。

以下是一个示例：

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

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

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

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

在上面的例子中，我们首先将父元素的 display 属性设置为 flex，并使用 justify-content: space-between 属性将子元素在水平方向上均匀分布。然后，在每个子元素上应用 Grid 的布局，以实现垂直方向上的均匀分布。