css flexwarp

### CSS Flexbox `flex-wrap` 属性详解

#### 定义与作用
`flex-wrap` 是用于控制弹性盒子中的项目是否应该强制单行显示还是可以多行排列的属性。当项目的总宽度超过容器时，此属性决定了这些项目是否会换到下一行继续排列[^1]。

#### 基本语法

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

其中 `value` 可以为以下几个选项之一：

- **nowrap**: 默认值。所有的子项都位于同一行内，即使溢出父级容器也不会折行。
- **wrap**: 子项会在必要时拆分为多行，并且新行会沿交叉轴方向堆叠。
- **wrap-reverse**: 类似于 `wrap` ，但是新的行沿着交叉轴反向堆叠[^2]。

#### 实际应用案例
下面是一个简单的例子来展示如何使用 `flex-wrap` 来创建一个多列布局，每个子元素的基础宽度设定为120像素:

<div class="container">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <!-- 更多项 -->
</div>

对应的样式定义如下：

.container {
  display: flex;
  flex-wrap: wrap; /* 允许自动换行 */
}

.item {
  flex-basis: 120px; /* 设定基础宽度 */
  margin: 5px;       /* 添加间距 */
}

这段代码将会使得 `.item` 在其总数超出容器允许的空间之后开始新的一行。

#### 进一步说明
除了上述基本配置外，还可以结合其他Flexbox相关属性一起调整布局效果，比如 `justify-content`, `align-items` 或者 `order` 等等，从而实现更加复杂而灵活的设计需求[^3]。