小屏幕下Flex元素溢出的解决方法是：启用flex-wrap: wrap允许换行，设置min-width防止子项过窄，用max-width限制单个子项宽度，并结合媒体查询适配不同屏幕。
小屏幕下 Flex 元素溢出，核心是容器没换行、子项又太宽。解决思路很明确：让子项能“断行”，同时控制单个子项最小不缩太小、最大不撑太宽。
用 flex-wrap: wrap 允许换行
默认 flex 容器是 flex-wrap: nowrap，所有子项强行挤在一行，小屏必然溢出。加一句就能破局：
.container { display: flex; flex-wrap: wrap; }
这样当子项总宽度超过容器时，自动折到下一行，而不是溢出或横向滚动。
立即学习“前端免费学习笔记（深入）”；
用 min-width 防止子项被压缩过小
光 wrap 不够——如果子项设了 flex: 1 或没设宽，小屏下可能被压成一条线，内容看不清。给子项加个底线：
-
flex-basis 设基础宽度（比如
flex-basis: 200px） - 或直接用 min-width: 200px，更直观可控
- 配合
flex: 1 1 auto，表示可伸缩但有最小保障
用 max-width 防止单项占满整行
某些子项内容多（比如带图的卡片），在中等屏可能撑太宽，挤走其他项。加个上限更稳妥：
.item { max-width: 350px; flex: 1 1 auto; }
这样它最多占 350px，剩余空间留给其他兄弟，换行也更均匀。
配合媒体查询做精细调节
上述设置是通用解法，但不同设备表现仍有差异。可在小屏下进一步收紧：
@media (max-width: 480px) {
.item { min-width: 140px; max-width: 100%; }
}
比如手机竖屏时，让子项最小 140px、最大占满一行，确保点击区域和可读性。
