弹性盒子布局flex换行

在使用弹性盒子布局时，当一行排列的元素超出了容器的宽度时，可以通过设置 `flex-wrap` 属性来控制元素换行的方式。具体的取值和作用如下：

- `nowrap`（默认值）：不换行，所有元素都在同一行上排列；
- `wrap`：换行，第一行在上方，后续行在下方，每行从左向右排列；
- `wrap-reverse`：换行，第一行在下方，后续行在上方，每行从右向左排列。

下面是一个简单的示例，演示了如何使用 `flex-wrap` 属性来控制元素的换行：

<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 class="item">Item 6</div>
  <div class="item">Item 7</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap; /* 允许自动换行 */
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
}

.item {
  width: 100px;
  height: 50px;
  margin: 10px;
  background-color: #f0f0f0;
}

在上面的示例中，容器的宽度为 `300px`，每个元素宽度为 `100px`，加上每个元素的 `margin`，超出了容器的宽度。因此，设置了 `flex-wrap: wrap;`，允许元素自动换行。最终的效果如下图所示：