flex-wrap有三个值：nowrap默认不换行，wrap允许换行，wrap-reverse反向换行；通过设置wrap可实现多行弹性布局，常用于响应式卡片排列，配合子项宽度和gap属性控制布局结构。
在使用 Flex 布局时，子元素默认不会换行，全部挤在一行内。要让 Flex 子元素在空间不足时自动换行，就需要用到 flex-wrap 属性。通过设置不同的值，可以灵活控制子项的排列方式。
理解 flex-wrap 的三个基本值
flex-wrap 决定容器内的子元素是否换行以及如何换行，它有三个常用取值：
- nowrap：默认值，所有子元素排在一行，不换行，可能会被压缩或溢出。
- wrap：允许子元素换行，当主轴方向空间不足时，后续子项会换到下一行。
- wrap-reverse：换行，但新行在上方（交叉轴反向），常用于特殊布局需求。
使用 wrap 实现多行弹性布局
当子元素总宽度超过容器时，设置 flex-wrap: wrap 可以让它们自动折行显示。适合做响应式卡片、图片墙等布局。
示例代码：
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
<p>.item {
flex: 0 0 calc(33.33% - 20px); /<em> 每行最多显示3个 </em>/
background: #007acc;
color: white;
padding: 20px;
text-align: center;
}</p>这样在不同屏幕宽度下，.item 会自动换行排列，保持美观的网格结构。
立即学习“前端免费学习笔记（深入）”；
使用 nowrap 防止换行（默认行为）
如果希望所有子元素强制在同一行显示，即使内容溢出也不换行，就使用 flex-wrap: nowrap。这是默认行为，适用于导航栏、标签页等场景。
注意：内容过多时可能造成横向溢出，建议配合 overflow-x: auto 允许滚动查看。
wrap-reverse 实现反向换行效果
设置 flex-wrap: wrap-reverse 后，换行的新行会出现在原行的上方（垂直方向反转），结合 flex-direction 可实现多种堆叠效果。
例如，与 flex-direction: column 搭配，可用于构建从下往上堆叠的聊天消息框布局。
基本上就这些。掌握 flex-wrap 的三种模式，能让你更自由地控制 Flex 容器的换行行为，适配各种复杂界面需求。关键在于根据设计意图选择合适的组合，同时合理设置子项尺寸和间隙。不复杂但容易忽略细节。
