一、 先说说为啥要用Flex+wrap

现在大家买东西都在手机上逛，页面宽度不够的时候如果不换行就会出现横向滚动条，用户体验极差。于是我们就想：把子项让它们自己会蹦跶到下一行呗，躺赢。。

好家伙... 其实只要给父容器加上display:flex和flex-wrap:wrap这俩属性，就能自动换行了。别问为什么这就是Flex的魔法。

二、 最基础的

    
商品1
    
商品2
    
商品3
    
商品4
    
商品5

上面这段代码里.container是父容器，里面放了若干个.item子项。 内卷。 只要把CSS打开flex-wrap子项宽度超出父容器宽度时就会掉下来。

三、关键属性到底怎么写？

父容器：

.container{
    display:flex;               /* 开启弹性盒子 */
    flex-wrap:wrap;            /* 允许多行 */
    gap:10px;                   /* 子项之间的间隙， 可有可无 */
}

子项宽度控制：

• flex:0 0 auto;    // 不拉伸，用自己的宽度；
• width:48%;  // 两列布局，大概占一半；
• min-width:120px;  // 最小宽度防止太窄。

如果你想让它在更窄的屏幕上一列显示， 只需要加个媒体查询：

@media {
    .item{width:100%;}
}

四、常见坑——别被这些坑绊倒！

a) 把flex-wrap:wraP 写成了wrapr根本不生效，不如...。

b) 子项没有设宽度或flex-basis, 导致所有子项被强制平分一行， 看起来像是"全都挤在一起"

c) 用了#footer {display:flex},但忘记给内部元素加flex-basis,后来啊全跑到一排，不会换行，物超所值。。

五、 完整Demo

六、进阶技巧——让你的页面更牛逼！

* 用align-content:center;可以让多行整体居中，性价比超高。。

* 想要每一行左对齐右对齐混合？配合:nth-child{margin-right:auto;}之类的选择器玩点小花样。

七、

只要记住两句话： 1️⃣ 父容器设display:flex + flex-wrap:wrap； 中肯。 2️⃣ 子项设好宽度或就能实现移动端"自动换行"

小编提醒：这篇文章虽然看起来乱七八糟，但其实内容还是靠谱的。想学更高级的Flex技巧可以去B站搜“Flex实战”，或者直接搜索“css flex wrap 实现自动换行”。祝大家搬砖愉快~✌️，尊嘟假嘟？

---

© 2026 菜鸟前端部落 | 本文仅供学习交流，转载请注明出处

---