flex-wrap: wrap 可使 Flex 子元素在空间不足时自动换行。默认 nowrap 不换行，wrap 允许换行且新行在下方，wrap-reverse 新行在上方。结合 justify-content 控制行内对齐，align-content 控制多行垂直分布，并可通过 flex 和 gap 实现响应式布局。
在使用 CSS Flexbox 布局时，当容器内的子元素总宽度超过容器宽度，默认情况下它们会被压缩在同一行。如果希望子元素在空间不足时自动换行，就需要使用 flex-wrap 属性。通过设置 flex-wrap: wrap，可以让 Flex 项目在超出容器时自动换到下一行，实现灵活的多行布局。
flex-wrap 的取值说明
flex-wrap 属性决定了 Flex 容器中的项目是否可以换行以及换行的方向。它有以下三个常用值：
- nowrap：默认值，所有项目都排列在一行（即使溢出容器）
- wrap：允许项目在必要时换行，第二行在第一行下方
- wrap-reverse：允许换行，但行的堆叠顺序是反向的（新行出现在上方）
启用换行的基本用法（wrap）
要让 Flex 子元素在超出容器时自动换行，只需在 Flex 容器上设置 flex-wrap: wrap：
.container {
display: flex;
flex-wrap: wrap; /* 启用换行 */
gap: 10px; /* 可选：设置项目之间的间距 */
}
.item {
flex: 0 0 200px; / 固定每个项目的最小宽度，不伸缩 /
}
在这个例子中，每个子项宽度为 200px，当容器宽度不足以容纳更多项目时，它们会自动换到下一行。
立即学习“前端免费学习笔记（深入）”；
控制换行行为与对齐方式
换行后，可以使用 justify-content 控制每行内项目的对齐方式，使用 align-content 控制行与行之间的对齐分布：
雕鹰团队二次开发服装类商城模板；ecshop 韩都衣舍2014最新豪华版+专题频道页面功能；采用DIV+CSS布局，并优化了很多代码，使模板打开速度更快，更利于SEO搜索引擎优化。顶级分类页调用该分类下精品商品排行，左右切换滚动特效，头部购物车鼠标移入显示购物车商品，首页分类下方调用各分类商品，并且商品有立即购买功能，列表页左侧商品分类默认商品展开状态，点击哪个分类进入此页面，那么这个分类处于展开
- justify-content：如 space-between、center、flex-start 等，作用于单行内的项目
- align-content：只在有多行时生效，可设为 flex-start、center、space-between、stretch 等，控制行之间的垂直分布
例如，让多行内容在容器中均匀分布：
.container {
display: flex;
flex-wrap: wrap;
align-content: space-between;
height: 300px; /* 需要有固定高度才能看到效果 */
}
响应式布局中的实用技巧
结合媒体查询和弹性宽度，可以轻松实现响应式卡片布局：
.container {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.item {
flex: 1 1 250px; / 最小宽度 250px，可伸缩 /
}
这样，在宽屏下每行显示多个项目，窄屏下自动减少每行数量并换行，无需额外 JS 或复杂计算。
基本上就这些。掌握 flex-wrap 是构建现代响应式布局的关键一步，配合 flex 属性和 gap 间距，能快速搭建整齐美观的多行内容区域。
