要实现多行 Flex 布局，需设置 flex-wrap: wrap 使子元素换行。1. 启用 display: flex 和 flex-wrap: wrap 或简写为 flex-flow: row wrap；2. 子项通过 width、flex-basis 或 flex: 0 0 设置宽度以控制换行时机；3. 使用 align-content 调整多行对齐方式，如 stretch、flex-start、space-between 等，注意至少两行才生效。示例中容器使用 flex-flow: row wrap、gap 间距和 align-content: flex-start，子项设 flex: 0 0 200px 实现响应式多行布局。核心是 flex-wrap 与宽度配合。
要实现多行 Flex 布局，关键在于使用 flex-wrap: wrap 属性，让 Flex 容器中的子元素在空间不足时自动换行。这样就能创建灵活的多行布局，适用于卡片、网格列表等场景。
1. 启用换行功能
默认情况下，Flex 容器内的项目不会换行。需要设置容器的 flex-wrap: wrap 来允许换行：
- display: flex; — 启用 Flex 布局
- flex-wrap: wrap; — 允许项目换行
这两个属性可以合并为 flex-flow: row wrap;，更简洁。
2. 设置子项宽度控制换行时机
子元素的宽度决定了它们何时换行。常见做法是给子项设置固定宽度或百分比宽度：
立即学习“前端免费学习笔记（深入）”；
- width: 200px; — 固定宽度，适合卡片布局
- flex: 0 0 30%; — 不伸缩，基础宽度为父容器的30%
- flex-basis: 200px; — 设置基准宽度，配合换行使用
使用 flex-basis 可以更灵活地控制每个项目占据的空间。
3. 多行对齐方式调整
当项目换行后，可以通过以下属性控制行与行之间的对齐：
- align-content: stretch; — 多行在交叉轴上拉伸填满（默认）
- align-content: flex-start; — 所有行靠顶部对齐
- align-content: space-between; — 行之间均匀分布空白
- align-content: space-around; — 每行周围分配空白
注意：align-content 在只有一行时无效，至少需要两行才起作用。
完整示例代码
一个典型的多行 Flex 布局写法：
.container {
display: flex;
flex-flow: row wrap;
gap: 10px;
align-content: flex-start;
}
.item {
flex: 0 0 200px;
height: 100px;
background: #007acc;
color: white;
}
这样无论屏幕大小如何变化，项目都会自动换行排列，形成响应式多行布局。
基本上就这些。核心是 flex-wrap: wrap 和合适的宽度控制，再配合对齐属性就能实现各种多行效果。
