关键在于三步：启用flex-wrap: wrap实现换行，设置子项flex与min-width（如flex: 1 1 calc(50% - 8px)和min-width: 240px）防止塌缩，使用gap替代margin实现统一响应式间距。
让 flex 布局在小屏幕上自动换行且间距合理，关键在于三步：启用换行、控制子项尺寸、合理设置间隙。默认情况下 flex 容器是 flex-wrap: nowrap，所以必须显式开启换行，并配合响应式断点调整子项的 flex 基础宽度和 margin/gap。
开启 flex-wrap 并设置主轴对齐方式
确保容器允许换行，并避免子项被强行压缩：
- 给父容器加
flex-wrap: wrap（默认是nowrap） - 用
justify-content: flex-start或space-between控制首行对齐，避免换行后末尾留大片空白 - 慎用
justify-content: space-around或space-evenly，它们会在每项两侧加等量间隙，换行后可能造成上下行间距不均
限制子项最小宽度，防止过度挤压
小屏下如果子项没有宽度约束，可能被压成一条细线或文字折行混乱：
- 给子项设
flex: 1 1 calc(50% - 8px)（双列）、calc(33.333% - 12px)（三列），其中减去的是 gap 总和的一半 - 更稳妥的方式是结合
min-width，例如min-width: 240px，再配flex: 1，让其在空间足够时伸展、不足时换行 - 避免只写
flex: 1而无最小宽度，否则在窄屏下可能塌缩到不可读
用 gap 替代 margin 实现统一、可响应的间距
gap 是 flex 和 grid 的原生间距属性，比手动加 margin 更干净、不触发 margin 折叠，也支持媒体查询单独调整：
- 父容器上直接写
gap: 16px，会同时作用于行内和行间间距 - 在小屏下用媒体查询收紧：
@media (max-width: 768px) { .container { gap: 12px; } } - 若需兼容老浏览器（如 IE），可用
margin+:nth-child模拟，但推荐优先用 gap + 适当降级
补充：处理单行残留与对齐问题
换行后最后一行子项少于其他行时，容易出现左右不对齐。可这样优化：
- 用
justify-content: flex-start保持左对齐（最常用且自然） - 若需居中最后一行，改用
justify-content: center，但整体会偏中，首行不再贴左 - 不推荐用伪元素占位或 JS 计算补空，增加复杂度且不利于语义和可访问性
