flex-wrap属性用于控制flex子元素是否换行。默认nowrap不换行，设置wrap可使子元素在空间不足时自动换行，结合flex和min-width能实现响应式布局。
在使用 Flex 布局时，当容器空间不足，子元素默认会挤在一起而不换行。要让子元素自动换行显示，就需要用到 flex-wrap 属性。这个属性控制 flex 容器中的子元素是否换行以及换行方式，是实现响应式布局的关键之一。
flex-wrap 的取值说明
flex-wrap 属性有三个常用值：
- nowrap：默认值，所有子元素都在一行显示，不换行。
- wrap：允许子元素换行，第一行在上方。
- wrap-reverse：允许换行，但第一行在下方（反向堆叠）。
实现子元素自动换行的步骤
要让 Flex 子元素在空间不足时自动换行，只需在容器上设置 display: flex 和 flex-wrap: wrap。
- 给父容器设置 display: flex 启用 Flex 布局。
- 添加 flex-wrap: wrap 允许子项换行。
- 为子元素设置固定或最大宽度，以便在超出容器时触发换行。
示例代码：
.container {
display: flex;
flex-wrap: wrap;
gap: 10px; /* 子元素之间留空隙 */
}
<p>.item {
flex: 0 0 200px; /<em> 不伸缩，基础宽度 200px </em>/
height: 100px;
background-color: #4CAF50;
}</p>在这个例子中，每个子项宽 200px，当容器宽度不足以容纳更多项目时，它们会自动换到下一行。
结合 flex 属性优化布局
使用 flex: 1 1 auto 可以让子元素根据可用空间自动调整宽度并支持换行。配合 min-width，能更好地控制响应效果。
- 设置 min-width 防止子元素被压缩过小。
- 使用 flex-basis 定义换行前的基础宽度。
- 结合媒体查询，在不同屏幕尺寸下调整子项宽度。
例如：
.item {
flex: 1 1 250px; /* 基础宽度 250px，可伸缩 */
min-width: 150px;
}
这样在窄屏下会自动换行为单列，在宽屏则多列分布，实现流畅的响应式效果。
基本上就这些。掌握 flex-wrap 和 flex 相关属性的搭配，就能轻松实现灵活、自适应的多行布局。
