通过设置flex-wrap: wrap并结合弹性宽度与媒体查询，可实现响应式多列布局：容器设display: flex和flex-wrap: wrap使子项换行，子项用百分比宽度如33.33%控制列数，配合@media在不同屏幕下调整为100%、50%或33.33%，实现移动端单列、平板两列、桌面三列；通过align-items: flex-start避免换行后高度不一导致的空白拉伸问题，从而构建自适应多列布局。
要通过 css flex-wrap 实现响应式多列布局，核心是结合 flex-wrap: wrap 与灵活的子项宽度控制，让元素在空间不足时自动换行，适配不同屏幕尺寸。
启用 flex-wrap 换行
默认情况下，Flex 容器中的项目不会换行。要实现多列并允许换行，需设置：
.container {
display: flex;
flex-wrap: wrap;
}
这样当子项目总宽度超过容器时，后面的项目会自动换到下一行，形成多列效果。
控制子项宽度以实现响应式列数
子项目的宽度决定了每行能容纳多少列。使用百分比或 flex-basis 可以动态调整列宽：
立即学习“前端免费学习笔记（深入）”；
- 例如，每个子项设为
flex: 0 0 33.33%，最多显示 3 列；在小屏幕上自动变为 2 列或 1 列。 - 搭配媒体查询可更精细控制：
.item {
flex: 0 0 100%; /* 默认单列 */
}
@media (min-width: 600px) {
.item {
flex: 0 0 50%; / 平板：两列 /
}
}
@media (min-width: 900px) {
.item {
flex: 0 0 33.33%; / 桌面：三列 /
}
}
处理不对齐和空白问题
换行后可能出现最后一行列数不足导致的空白拉伸。避免这个问题的方法包括：
- 不要给子项设置
height或确保高度一致。 - 使用
align-items: flex-start防止垂直拉伸。 - 若需等高列，可用
align-items: stretch（默认值）。
基本上就这些。用 flex-wrap: wrap 搭配弹性宽度，再辅以媒体查询，就能轻松实现响应式多列布局，无需浮动或网格也能适应各种设备。不复杂但容易忽略细节。
