html flex自动换行,css flex布局超长自动换行的示例代码

以下是一个HTML和CSS的示例代码，使用了flex布局并实现了自动换行：

HTML代码：

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
  <div class="flex-item">8</div>
  <div class="flex-item">9</div>
</div>

CSS代码：

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

.flex-item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: #ddd;
}

这段代码会将9个宽高均为100px的flex-item元素放在flex-container中，当容器宽度不足以容纳所有元素时，它们会自动换行。