css的弹性盒子换行

CSS的弹性盒子（Flexbox）是一种布局模型，用于在页面上更有效地排列、对齐和分配容器内项目之间的空间，即便它们的大小未知或是动态的。在使用Flexbox布局时，子项可能会因为各种原因需要换行，这可以通过`flex-wrap`属性来控制。

`flex-wrap`属性定义了当Flexbox容器中的项目超出其宽度或高度时，是否允许换行。这个属性有三个值可以选择：

1. `nowrap`（默认值）：不允许换行，所有项目将尝试在一行内显示，这可能会导致容器内的项目被压缩或者溢出容器。
2. `wrap`：允许换行，当项目超出容器的宽度或高度时，会按照正常的阅读方向换行，如果是横向布局则向下换行，纵向布局则向右换行。
3. `wrap-reverse`：与`wrap`类似，也允许换行，但是换行的方向相反。如果是横向布局则向上换行，纵向布局则向左换行。

以下是一个简单的例子来展示`flex-wrap`属性的使用：

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

.item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: lightblue;
  text-align: center;
  line-height: 100px;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <!-- 更多项目 -->
</div>

在这个例子中，`.container`是一个flex容器，它的子项目`.item`将会在容器宽度不足时自动换行。