如何使用 flex-item，让每一个div水平排布和垂直，一行排不下可以自动排到下一行，每个div都有间距？

要实现每个 div 水平排布和垂直排布，并在一行排不下时自动换行，同时给每个 div 添加间，可以使用 Flexbox 和一额外的 CSS 属性实现。

首先，一个具有 `display flex;` 和 `flex-wrap: wrap;` 属性父级容器，将使子元素以平和垂直方排布，并在一行排不下时自动换行。

然后，为每个子元素（即 div）添加间距，可以使用 `margin` 属性来控制。你可以根据需要调整间距的数值。

下面是一个示例代码，展示了如何实现这个需求：

HTML:

<div class="container">
  <div class="flex-item">Flex item 1</div>
  <div class="flex-item">Flex item 2</div>
  <div class="flex-item">Flex item 3</div>
  <div class="flex-item">Flex item 4</div>
  <div class="flex-item">Flex item 5</div>
</div>

CSS:

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

.flex-item {
  margin: 10px; /* 调整间距的数值，根据需要进行调整 */
}

在上面的示例中，`.container` 是父级容器，`.flex-item` 是子元素。通过设置 `.container` 的 `display: flex;` 和 `flex-wrap: wrap;` 属性，子元素会水平排布和垂直排布，并在一行排不下时自动换行。

通过在 `.flex-item` 中设置 `margin` 属性，可以为每个 div 添加间距。

希望这个示例对你有帮助！如果还有其他问题，请继续提问。