flex-wrap: wrap/nowrap详细说明

参考资料

1. CSS尺寸属性详细说明以及案例
2. css div内容居中
3. css3阴影效果
4. Flex布局与Grid布局的对比？
5. 边框属性详细说明以及案例
6. 有没有推荐的 CSS 过渡动画库？
7. css阴影效果属性
8. Flex布局如何优化页面加载速度？

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>

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

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。