子元素不换行是因为默认flex-wrap为nowrap，设置flex-wrap: wrap或使用flex-flow: row wrap即可实现换行，配合min-width和gap等属性可优化布局效果。
在使用CSS弹性盒子（Flexbox）布局时，子元素默认不会换行，所有项目会挤在一行或一列内显示。如果容器宽度不足，子元素可能会被压缩或溢出。要让子元素在空间不足时自动换行，需要使用 flex-wrap: wrap 属性。
为什么子元素不换行？
默认情况下，flex容器的 flex-wrap 属性值为 nowrap，这意味着所有子元素都会尝试在同一行内排列，即使超出容器也不会换行。
如何让子元素换行？
给父容器设置 flex-wrap: wrap，即可允许子元素在空间不足时自动换到下一行。
常用写法：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-wrap: wrap; /* 允许换行 */
}
也可以使用简写形式 flex-flow 同时设置主轴方向和换行：
.container {
display: flex;
flex-flow: row wrap; /* 横向排列，允许换行 */
}
实际应用建议
为了让换行效果更自然，建议配合以下设置：
- 给子元素设置固定或最小宽度，例如 min-width: 200px，避免被过度压缩
- 使用 flex: 1 1 auto 让子元素可伸缩且能响应空间变化
- 控制间距时可用 gap 属性（现代浏览器支持）来统一设置子元素之间的间隔
基本上就这些。只要加上 flex-wrap: wrap，就能解决弹性盒子子元素无法换行的问题，实现类似网格的响应式布局效果。不复杂但容易忽略。
