css flex 布局换行

在CSS Flexbox布局中，如果想要在容器内的项目超过容器宽度时能够自动换行，可以将CSS属性 flex-wrap 设置为 wrap。

以下是一个简单的例子：

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容器 */
  flex-wrap: wrap;    /* 允许换行 */
  width: 100%;        /* 容器宽度可以设置为100%，也可以是固定值或max-width */
}
 
.flex-item {
  flex: 1;            /* 让所有子项占据等分的空间 */
  margin: 5px;        /* 项目之间的间隔 */
  min-width: 100px;   /* 最小宽度，防止项目缩得太小 */
}

在这个例子中，.flex-container 是一个flex容器，通过设置 flex-wrap: wrap; 属性，当容器内的空间不足以容纳更多的项目时，项目会自动移到下一行。.flex-item 是容器内的子项，它们会等分分配容器的空间，并且每个项目至少有100px宽，以防止它们变得太小。