flex-wrap: wrap/nowrap详细说明

参考资料

1. css3中设置阴影的属性是
2. 如何提高Flex布局的性能？详细说明
3. 如何添加按钮的过渡动画效果？
4. CSS尺寸属性详细说明以及案例
5. 有没有现成的Vanta.js与CSS过渡模板？
6. 如何编写CSS代码？
7. css阴影效果属性有哪些,
8. flex-direction: row/column

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>

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