flex-wrap属性用于控制flex容器内子元素的换行行为，其常用值为nowrap（不换行）、wrap（向下换行）和wrap-reverse（向上换行）。通过结合flex-direction、gap、align-content等属性，可实现如多行卡片布局、聊天消息流等响应式设计场景，有效解决子元素溢出问题并提升布局灵活性。
在使用 Flex 布局时，当容器内的子元素总宽度超过容器本身，如何合理地进行换行显示是一个常见需求。这时就需要用到 flex-wrap 属性。它决定了 flex 容器中的项目是否换行以及换行的方向。
flex-wrap 的基本取值与作用
flex-wrap 属性有三个常用值：
- nowrap：默认值，所有项目都排列在一行（或一列），不换行，超出部分可能溢出容器。
- wrap：允许换行，第一行在上方，后续行向下排列。
- wrap-reverse：允许换行，但第一行在下方，后续行向上叠加。
结合 flex-direction 可以更灵活控制主轴方向和换行后的交叉轴排列。
实现多行卡片布局的实践示例
假设我们要做一个响应式的商品卡片列表，每张卡片宽度固定为 200px，在不同屏幕下自动换行排列：
.container {
display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 16px;
}
<p>.card {
flex: 0 0 200px; /<em> 不伸缩，基础宽度 200px </em>/
height: 150px;
background-color: #4CAF50;
color: white;
display: flex;
align-items: center;
justify-content: center;
}</p>在这个例子中，flex-wrap: wrap 确保当容器宽度不足以容纳下一个卡片时，自动换到下一行。gap 属性设置项间距，避免拥挤。
反向换行与特殊布局场景
如果想让内容从下往上堆叠换行，可以使用 wrap-reverse。比如在聊天界面中，希望新消息出现在底部，旧消息向上滚动：
.chat-container {
display: flex;
flex-direction: column;
flex-wrap: wrap-reverse;
height: 400px;
overflow: hidden;
}
此时即使新增消息，也会“挤”开原有内容向上排列，视觉上新内容出现在底部，适合某些对话流布局。
配合 justify-content 与 align-content 调整换行后对齐
当发生换行后，可以使用 align-content 控制行与行之间的对齐方式：
- align-content: flex-start —— 所有行靠上对齐
- align-content: center —— 行整体居中排列
- align-content: space-between —— 行之间均匀分布，首尾贴边
- align-content: stretch —— 拉伸每行高度填满容器（需容器有固定高度）
注意：align-content 在只有一行时无效，只有换行后才起作用。
