flex布局自动换行

在Flex布局中，要实现自动换行，可以将容器的flex-wrap属性设置为wrap。这样，当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>

CSS:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
 
.flex-item {
  width: 100px; /* 或者其他宽度 */
  height: 100px; /* 设置高度用于演示 */
  margin: 5px; /* 间距 */
  background-color: lightblue; /* 背景颜色，仅为了更好地展示效果 */
  display: flex;
  justify-content: center;
  align-items: center;
}

在这个例子中，.flex-container 是一个Flex容器，它的 flex-wrap 属性被设置为 wrap，这意味着当Flex项目 .flex-item 不能在一行内显示时，它们会自动移动到新的一行。每个 .flex-item 有一个固定的宽度，并且被设置了背景颜色，以便更明显地展示它们是如何在容器内自动换行的。