弹性容器中的项重叠

在弹性容器中，如果项的大小超过容器的可用空间，就会发生重叠。解决方法之一是使用flex-wrap属性来控制换行。下面是一个示例代码：

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>

CSS:

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

.item {
  flex: 0 0 200px; /* 设置项的固定宽度 */
  height: 100px;
  margin: 10px;
  background-color: #ccc;
}

在上面的示例中，容器使用了flex-wrap: wrap来实现换行。当项的总宽度超过容器的宽度时，会自动换行。每个项具有固定的宽度，通过flex属性来设置。设置了margin来给项之间添加间距，可以根据需要进行调整。

这样，当项的宽度超过容器的可用空间时，它们会自动换行，避免重叠。