能，但需配合 flex-basis 与媒体查询；单靠 flex-wrap: wrap 仅允许换行，不触发堆叠，关键在子项宽度（如 flex-basis: 100% 或响应式 calc()）和容器空间匹配。
flex-wrap: wrap 能不能让小屏幕自动堆叠？
能，但单靠 flex-wrap: wrap 不够——它只允许子项换行，不控制“何时换行”。真正决定堆叠时机的是每个子项的宽度（flex-basis）和容器的可用空间。如果子项的 flex-basis 固定为 300px，而容器在小屏下只剩 280px，它才会被迫换行；否则仍会强行并排、溢出或缩小。
怎么配 flex-basis 才让小屏自然堆叠？
关键不是写死像素值，而是用相对单位配合媒体查询或弹性行为：
-
flex-basis: 100%：最直接，强制每项独占一行，适合纯堆叠场景 -
flex-basis: 50%+flex-wrap: wrap：两栏布局，小屏下自动退化为一栏（当容器宽度50%对应像素小于子项最小宽度时） -
flex-basis: min-content或max-content：慎用，易受内容长度影响，导致不可预测换行 - 更稳妥的做法是结合
@media主动重置：@media (max-width: 768px) { .item { flex-basis: 100%; } }
为什么 flex-basis 设成 0% 还不堆叠？
因为 flex-basis: 0% 在多数浏览器中等价于 0px（尤其当父容器无明确 width 时），此时 flex-grow: 1 会立刻拉伸填满，反而锁死并排。常见错误配置：
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 1 0%; /* 看似灵活，实则危险 */
}正确替代写法（兼顾弹性与响应）：
立即学习“前端免费学习笔记（深入）”；
.item {
flex: 1 1 calc(50% - 8px); /* 预留间隙，防 margin 折叠 */
margin: 4px;
}
@media (max-width: 768px) {
.item {
flex: 1 1 100%;
}
}移动端堆叠还要注意什么？
除了 flex-wrap 和 flex-basis，三个容易被忽略的点：
- 父容器必须有明确宽度（如
width: 100%或max-width），否则%值计算失效 - 避免给子项设
min-width（尤其是min-width: 300px），它会阻止换行，哪怕容器只剩200px -
box-sizing: border-box必须全局或显式设置，否则 padding/border 会撑出额外宽度，导致意外溢出
最简健壮组合就是：flex-wrap: wrap + flex-basis: 100%（小屏）或 flex-basis: calc(33.333% - gap)（大屏），再加一层媒体查询兜底——别指望 flex 自己“智能判断”屏幕意图。
