多个div通过flex布局 最大宽度为100px 超出三个div则换行展示 要求每个div标签有间隔 上下行有间隔 css

为了实现这个需求，你可以使用CSS的`display: flex`, `flex-wrap: wrap`, `justify-content: space-between`, 和 `margin` 属性。这里是一个简单的示例：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10px; /* 上下行间隔 */
}

.item {
  width: 100px;
  box-sizing: border-box; /* 确保宽高包括内边距和边框 */
  margin-bottom: 10px; /* 下面相邻元素间距 */
}

/* 如果需要所有方向都有间隔，可以添加下面这行 */
.item::before,
.item::after {
  content: " ";
  display: block;
  height: 0;
  margin-top: 10px; /* 上面相邻元素间距 */
}

HTML部分：

<div class="container">
  <div class="item">Div 1</div>
  <div class="item">Div 2</div>
  <div class="item">Div 3</div>
  <!-- 添加更多的 div 根据需要 -->
</div>

当你有超过3个 `.item` 元素并且它们的总宽度大于容器的可用空间（即宽度小于400px），它们会自动换行到下一行。