WEB前端:使用display:flex控制并布局列表自动换行

某些情况下,需要将数个内容等分,但是在不依赖前端框架的情况下,使用display flex是最好的选择但是如何正确的使用呢?现在直接上代码设置ulul{display: flex;}设置lili{flex: 0 0 33.33333%;}设置换行ul{flex-wrap: wrap;}设置居中ul{justify-content: space-between;}综合起来:ul{display: flex;flex-wrap:&

某些情况下,需要将数个内容等分,但是在不依赖前端框架的情况下,使用display flex是最好的选择

但是如何正确的使用呢?

image.png

现在直接上代码


设置ul

ul{display: flex;}

设置li

li{flex: 0 0 33.33333%;}

设置换行

ul{flex-wrap: wrap;}

设置居中

ul{justify-content: space-between;}


综合起来:

ul{display: flex;flex-wrap: wrap;}
li{flex: 0 0 33.33333%;}


评论