css弹性盒display:flex；如何实现超出换行

CSS弹性盒子（Flexbox）可以通过设置 flex-wrap 属性来实现超出容器大小的子元素自动换行。

flex-wrap 属性定义了弹性盒子的子元素在必要时是否应该换行。它的值可以是：

• nowrap（默认值）：不换行
• wrap：换行，第一行在上方
• wrap-reverse：换行，第一行在下方

为了使用 flex-wrap，你需要确保父元素的 display 属性设置为 flex。

下面是一个简单的例子：

HTML:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <!-- 更多的 .flex-item 子元素 -->
</div>

CSS:

.flex-container {
  display: flex; /* 设置为弹性盒子 */
  flex-wrap: wrap; /* 实现换行 */
}
 
.flex-item {
  width: 100px; /* 定义子元素的宽度 */
  height: 100px; /* 定义子元素的高度 */
  margin: 5px; /* 子元素之间的间距 */
}

在这个例子中，.flex-container 是一个弹性盒子，其子元素 .flex-item 会在容器宽度不足以容纳更多子元素时自动换行。