要让Flex子元素自动换行，需设置flex-wrap: wrap。默认nowrap导致不换行，添加该属性后子项在空间不足时换行，配合gap、justify-content等实现多行布局。
在使用 CSS 的 Flex 布局时，如果子元素没有换行，可能是因为容器默认不允许多行显示。要让 flex 项目在一行放不下时自动换行，需要给父容器设置 flex-wrap: wrap。
问题原因：flex 默认不换行
Flex 容器的默认行为是将所有子元素挤在一行内，即使空间不足也不会换行。这是因为 flex-wrap 的初始值是 nowrap，必须手动开启换行。
解决方法：启用 flex-wrap: wrap
给 flex 容器添加以下样式即可实现多行布局：
.container {
display: flex;
flex-wrap: wrap; /* 关键属性 */
}
这样当主轴空间不足时，子项会自动折到下一行，而不是被压缩或溢出。
立即学习“前端免费学习笔记（深入）”；
配合使用的常用属性
- justify-content：控制每行内部子项的主轴对齐方式
- align-items：控制单行中子项的交叉轴对齐（单行高度内）
- align-content：多行情况下的行与行之间的对齐方式（如 space-between、center）
示例：一个简单的多行卡片布局
.card-container {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
flex: 0 0 200px; /* 固定宽度，必要时换行 */
height: 100px;
background: #eee;
}
在这个例子中，每个卡片宽 200px，容器宽度不足时会自动换行，gap 控制卡片之间的间距。
基本上就这些，只要记得加上 flex-wrap: wrap，flex 多行布局就能正常工作了。
