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 class="flex-item">Item 10</div>
</div>

CSS代码：

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

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

在上面的示例代码中，我们使用了flex布局来实现自动换行。在flex容器上设置了`flex-wrap: wrap`属性，当项目的总宽度超出容器的宽度时，项目将自动换行。同时，我们给项目设置了固定的宽度和高度，以及一定的外边距，使得项目之间有一定的间隔效果。