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

HTML代码：

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

CSS代码：

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

.item {
  flex: 0 0 200px;
  height: 50px;
  background-color: #ccc;
  margin: 10px;
}

这段代码会在`.container`容器内使用Flex布局，使用`flex-wrap: wrap`属性让元素自动换行。每一个`.item`元素都设置了固定的宽度和高度，并且给定了`margin`属性以便让它们之间有一定的间隔。在这个例子中，当容器的宽度不足以容纳所有的`.item`元素时，它们会自动换行，不会出现溢出的情况。