设置flex-wrap为wrap可实现弹性盒子换行布局，子项在空间不足时自动折行。1. flex-wrap取值包括nowrap（默认不换行）、wrap（向下换行）和wrap-reverse（向上换行）。2. 基本换行通过.container{display:flex;flex-wrap:wrap}实现，子项设固定宽度与margin后会自动换行。3. 配合justify-content控制每行内对齐方式，align-content控制多行整体垂直分布。4. 结合媒体查询与calc()设置子项宽度如flex:00calc(33.333%-20px)，可实现响应式每行三列布局。关键在于合理计算宽度与外边距，避免因margin未计入导致换行异常。
使用 CSS 的 flex-wrap 属性可以轻松实现弹性盒子（Flexbox）中的换行布局。默认情况下，flex 容器内的子元素会排在一行内，超出也不会换行。通过设置 flex-wrap，可以让子项在空间不足时自动换到下一行。
1. 理解 flex-wrap 的取值
flex-wrap 有三个常用值：
- nowrap：所有子项强制在一行显示（默认行为）
- wrap：允许子项在必要时换行，新行在主轴方向下方
- wrap-reverse：换行方向与 wrap 相反，新行在主轴方向上方
2. 基本换行布局示例
以下是一个常见的多列卡片换行布局：
.container {display: flex;
flex-wrap: wrap;
}
.item {
width: 200px;
margin: 10px;
padding: 20px;
background: #f0f0f0;
}
在这个例子中，每个子项宽 200px，加上 margin 后总宽度约 220px。当容器宽度不足以容纳更多项目时，它们会自动换到下一行。
立即学习“前端免费学习笔记（深入）”；
装修公司企业网站源码2.0
下载
装修公司源码，采用DIV+CSS布局，首页顶部采用了超大宽屏banner焦点图切换，带伸缩功能的导航条。首页信息展示量大，有利于SEO优化，首页版块包括，导航，焦点图切换，案例，行业动态，装修经验，装修知识。源码支持伪静态，后台开启即可，服务器必须支持rewrite功能，否则无法实现伪静态功能。信息支持二级分类。后台支持信息批量修改，删除，可以支持，视频，图片，附件上传。
3. 控制换行对齐方式
配合 justify-content 和 align-content 可进一步控制换行后的对齐：
- justify-content: space-between：每行内项目左右对齐分布
- align-content: flex-start：多行整体靠上对齐（默认）
- align-content: center：多行整体垂直居中
- align-content: space-around：行间距均匀分布
4. 响应式换行技巧
结合媒体查询和可变宽度，能实现响应式换行效果：
.item {flex: 0 0 calc(33.333% - 20px); /* 每行最多3个 */
margin: 10px;
}
这样在不同屏幕尺寸下，项目会根据容器宽度自动调整每行数量，实现类似网格的灵活布局。
基本上就这些。只要设置 display: flex 和 flex-wrap: wrap，再合理控制子项宽度，就能快速构建出自动换行的现代布局。不复杂但容易忽略细节，比如 margin 是否包含在计算中。
