flex布局一行三个自动换行

要实现一行三个自动换行的布局，可以使用 Flex 布局。以下是一个示例：

HTML 结构：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
</div>

CSS 样式：

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

.item {
  flex: 0 0 calc(33.33% - 10px); /* 10px 是为了给 item 之间留出一些间距 */
  margin: 5px;
}

在上述示例中，`.container` 是包含所有子项的容器元素。通过设置 `display: flex;`，我们创建了一个 Flex 容器。然后，通过设置 `flex-wrap: wrap;`，实现了自动换行的效果。

每个子项都具有 `.item` 类名。通过设置 `flex: 0 0 calc(33.33% - 10px);`，我们将每个子项的宽度设置为占据一行的三分之一，并留出一些间距。在这个示例中，我们使用了 `calc()` 函数来计算宽度，可以根据实际情况进行调整。

最后，通过设置 `margin: 5px;`，为子项之间添加了一些间距，可以根据需要进行调整。

这样，就可以实现一行三个自动换行的 Flex 布局。