参考资料

1. 哪种布局方式更适合移动端？
2. 如何避免Flex容器高度塌陷？
3. 详细说明：justify-content: flex-start/end
4. 如何优化过渡动画的性能？
5. 伪类选择器详细说明以及案例
6. 如何用Flex布局制作响应式布局？
7. CSS网格详细说明以及案例
8. Flex布局如何优化页面加载速度？

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>

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