启用flex-wrap: wrap并结合flex属性可实现响应式多列布局，容器设换行后子项按空间自动折行；通过flex: 1 1 200px等设置基础宽度与伸缩性，配合gap控制间距，窄屏单列、宽屏多列，实现自适应卡片网格。
使用CSS Flexbox制作多列布局时，结合flex-wrap: wrap与flex属性可以轻松实现响应式、自适应的多列效果。关键在于容器设置换行，并为子项合理分配空间。
启用换行以支持多列布局
默认情况下，Flex容器中的项目不会换行，所有项目会尽量排在一行内。要让项目在空间不足时自动换行，需设置：
flex-wrap: wrap;将该属性应用在容器上，允许子元素在宽度不够时折到下一行，形成多列结构。
使用 flex 属性控制列宽与弹性
flex是flex-grow、flex-shrink和flex-basis的简写，用于定义每个子项如何分配可用空间。
立即学习“前端免费学习笔记（深入）”；
常见用法示例：
-
flex: 1 1 200px— 每个子项主轴基础宽度为200px，可伸缩以填充容器 -
flex: 0 0 33.33%— 固定三列布局，不伸缩，每列占三分之一宽度 -
flex: 0 0 25%— 四列等宽布局（注意留出间隙处理）
通过调整flex-basis值，可以设定“最小建议宽度”，配合wrap实现响应式断点。
实际代码示例：响应式卡片网格
以下是一个典型的多列卡片布局实现：
.container {display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
flex: 1 1 200px;
background: #fff;
border: 1px solid #ddd;
padding: 16px;
}
解释：
- 容器开启
flex-wrap: wrap，允许换行 - 每个
.card的基础宽度为200px，但能根据容器伸缩 - 在窄屏下自动变为单列，在宽屏下显示多列
-
gap设置间距，避免使用margin带来的对齐问题
注意事项与技巧
为了确保布局稳定美观，注意以下几点：
- 给子项设置最大宽度（
max-width）防止过度拉伸 - 使用
min-width: 0防止内容过长导致弹性失效 - 若使用百分比宽度，考虑减去边距或使用
box-sizing: border-box - 测试不同屏幕尺寸下的换行行为，必要时用媒体查询微调
基本上就这些。灵活运用flex-wrap: wrap和flex属性，无需媒体查询也能做出自然流动的多列布局。不复杂但容易忽略细节。
