移动端列表横向溢出主因是未按视口重置布局流方向，应禁用min-width/white-space:nowrap，小屏用flex-direction:column或grid-template-columns:1fr，并设max-width:100%防图片撑宽。
移动端列表元素横向溢出或文字换行异常
常见于 display: flex 或 display: grid 布局的列表项在小屏下未收缩，导致内容被截断、滚动条意外出现，或文字强行撑宽容器。根本原因不是“拥挤”，而是未针对视口宽度重置布局流方向。
- 检查是否对
.list-item设置了固定min-width或white-space: nowrap，这两者会阻止浏览器自动换行 - 避免在移动端用
flex-direction: row配合不定宽子项——改用column更可控 - 优先用
max-width: 100%替代width: 100%，防止图片/嵌入内容突破容器
@media 中如何精准触发单列切换
别依赖模糊的 max-width: 768px。真实场景中，iPhone SE（384px）和折叠屏展开态（>1200px）都可能需要单列，关键看内容可读性而非设备类型。
- 用
max-width: 480px覆盖主流小屏（含竖屏手机），再加一条max-width: 640px处理部分平板横屏临界点 - 如果列表含表单控件（如
select、input），需额外限制font-size：小屏下16px文字在 320px 宽度里最多显示 12 个汉字，超长 label 必须换行 - 慎用
vw单位控制 padding/margin——iOS Safari 在横屏切换时存在渲染延迟，导致布局跳动
Flex 布局下强制单列的最小代码集
不需要重写整个列表结构，只需覆盖父容器的 flex 行为。注意：必须确保子项没有 flex: 0 0 auto 类似声明锁死尺寸。
.list-container {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
<p>@media (max-width: 480px) {
.list-container {
flex-direction: column;
align-items: stretch; /<em> 防止子项宽度塌缩 </em>/
}
.list-item {
width: 100%; /<em> 关键：解除 flex 自动分配宽度 </em>/
}
}Grid 布局切换单列时的隐性陷阱
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 在小屏下仍可能生成双列（如 560px 宽度），因为 2×280px = 560px 刚好填满。这不是 bug，是 Grid 的预期行为。
立即学习“前端免费学习笔记（深入）”；
- 改用
grid-template-columns: 1fr强制单列，比repeat()更直接 - 若需保留响应式列数但避免“伪双列”，把
minmax()下限降到240px以下（如minmax(160px, 1fr)），让小屏更早退化为单列 - Grid 的
gap在单列时会变成上下间距，但某些安卓 WebView 对gap支持不全，建议降级用margin-bottom
实际项目里最常被忽略的是：列表项内嵌的图片或图标未设置 max-width: 100%，导致它们撑开整个 .list-item 容器——哪怕布局已切为单列，视觉上依然“拥挤”。
