小屏幕下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、最大占满一行，确保点击区域和可读性。