flex实现卡片列表自动换行需设容器display: flex、flex-wrap: wrap、gap: 16px；卡片用flex: 0 0 calc(33.333% - 10.666px)或flex: 0 0 300px并配max-width: 100%；响应式通过媒体查询调整flex值，兼容旧浏览器可改用margin模拟gap。
用 Flex 实现卡片列表自动换行并控制间距，核心是设置容器为 flex-wrap: wrap，再通过 gap 或 margin 合理控制卡片间空隙，同时确保子项不强行撑满导致换行异常。
设置容器支持换行 + 均匀间距
给外层容器（如 .card-list）设为 Flex 并启用换行：
display: flex-
flex-wrap: wrap（关键：允许子项折行） -
gap: 16px（推荐：统一控制行列间距，现代浏览器兼容良好）
✅ 示例：
.card-list {
display: flex;
flex-wrap: wrap;
gap: 16px;
}控制单张卡片宽度，触发自动换行
卡片宽度需为「相对值」或「固定值+合理最大宽度」，否则可能单行铺满不换行：
- 用
flex: 0 0 calc(33.333% - 10.666px)实现每行 3 张（减去 gap 占用） - 更稳妥写法：
flex: 0 0 300px（固定宽度），配合max-width: 100%适配小屏 - 避免写
width: 100%—— 会强制占满一行，破坏换行逻辑
响应式优化：不同屏幕列数自适应
用媒体查询动态调整卡片基础宽度，比 JS 更轻量：
- 小屏（手机）：
flex: 0 0 100%→ 每行 1 张 - 中屏（平板）：
flex: 0 0 calc(50% - 8px)→ 每行 2 张 - 大屏（桌面）：
flex: 0 0 calc(33.333% - 10.666px)→ 每行 3 张
注意：gap 值保持一致，计算时用 gap / 2 补在左右 margin 里（若不用 gap 属性）。
兼容性兜底（老版 iOS/Android）
若需支持 gap 不可用的环境（如 iOS 11 以下），改用 margin 模拟：
- 给卡片加
margin-right和margin-bottom - 用
:nth-child(3n)清除最后一列的右距（避免溢出） - 或用伪元素 +
margin-left: -gap的负边距技巧整体修正
但优先用 gap，简洁且无副作用。
