参考资料

1. CSS弹性盒子详细说明以及案例
2. 如何用添加产品图片和描述？
3. css中设置div居中
4. css阴影效果代码
5. 如何提高Flex布局的性能？详细说明
6. Flex布局在动画制作中的应用？
7. Flex布局与Grid布局的对比？
8. css阴影效果怎么设置

flex-wrap: wrap/nowrap详细说明

flex-wrap 控制 flex 容器内项目的换行行为。

属性值：

• nowrap（默认）：不换行，所有项目排在一行。

• wrap：项目按需换行，从上到下排列。

• wrap-reverse：项目按需换行，从下到上排列。

示例：

.container {
  display: flex;
  flex-wrap: wrap; /* 或 nowrap/wrap-reverse */
}

用法：

1. nowrap
   所有项目挤在一行，可能溢出容器。

   <div style="display: flex; flex-wrap: nowrap; width: 200px;">
     <div style="width: 100px;">1</div>
     <div style="width: 100px;">2</div>
     <div style="width: 100px;">3</div>
   </div>

   效果：三个 100px 宽的项目挤在 200px 容器内，溢出。

2. wrap
   项目自动换行，避免溢出。

   <div style="display: flex; flex-wrap: wrap; width: 200px;">
     <div style="width: 100px;">1</div>
     <div style="width: 100px;">2</div>
     <div style="width: 100px;">3</div>
   </div>

   效果：前两项目在第一行，第三项目换到第二行。

3. wrap-reverse
   换行方向相反（从下到上）。

   <div style="display: flex; flex-wrap: wrap-reverse; width: 200px; height: 150px;">
     <div style="width: 100px;">1</div>
     <div style="width: 100px;">2</div>
     <div style="width: 100px;">3</div>
   </div>

   效果：第三项目在上方，前两项目在下方。