CSS 创建具有环绕效果的等尺寸 div

在本文中，我们将介绍如何使用 CSS 创建具有环绕效果的等尺寸 div。这个技巧可以帮助我们创建漂亮的布局，使得每个 div 具有相同的大小，并且能够自动环绕。

阅读更多：CSS 教程

使用 Flexbox

Flexbox 是 CSS 中最常用的布局模型之一，它可以帮助我们更轻松地创建等尺寸的 div，并在需要时进行自动环绕。我们可以使用以下代码来实现这一效果：

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 0 200px;
}

在上述代码中，我们首先创建一个 .container 类，将其设置为 flex 布局，并通过设置 flex-wrap: wrap 实现自动环绕。然后，我们创建一个 .item 类，通过设置 flex: 1 0 200px 实现等尺寸的效果。这里的 flex: 1 表示每个 div 的宽度平均分配，0 表示不可缩小，200px 表示每个 div 的最小宽度为 200px。

接下来，我们将使用一个示例来说明这个技巧的实际应用。假设我们有一个父元素 div，其中包含 6 个子元素 div。我们希望这些子元素 div 自动环绕，并且具有相同的大小。我们可以使用以下 HTML 代码来创建这个布局：

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

然后，将上述的 CSS 代码添加到我们的样式表中，即可实现等尺寸的 div，并且能够自动环绕。

使用 Grid

另一种常用的布局模型是 Grid。类似于 Flexbox，我们可以使用 Grid 来创建等尺寸的 div，并实现自动环绕的效果。以下是一个示例代码：

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

在上述代码中，我们首先创建一个 .container 类，并将其设置为 grid 布局。然后，通过设置 grid-template-columns 实现等尺寸的效果。其中，repeat(auto-fill, minmax(200px, 1fr)) 表示每个 div 的宽度为 200px，并且自动填充。grid-gap 属性用于设置每个 div 之间的间距。

同样，我们使用一个示例来说明这个技巧的实际应用。假设我们有一个父元素 div，其中包含 6 个子元素 div。我们希望这些子元素 div 自动环绕，并且具有相同的大小。我们可以使用以下 HTML 代码来创建这个布局：

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

然后，将上述的 CSS 代码添加到我们的样式表中，即可实现等尺寸的 div，并且能够自动环绕。