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

HTML代码：

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

CSS代码：

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

.flex-item {
  flex: 1 0 200px;
  margin: 10px;
  background-color: #ccc;
  text-align: center;
  line-height: 200px;
}

这段代码中，`.flex-container`是一个使用Flex布局的容器，设置了`flex-wrap: wrap`属性，表示子元素可以自动换行。`.flex-item`是容器中的子元素，设置了`flex: 1 0 200px`属性，表示子元素可以自动伸缩，但最小宽度为200px，同时设置了`margin: 10px`属性，表示子元素之间有10px的间隔。为了方便展示，我给`.flex-item`设置了一些背景颜色和文本样式。