flex卡片布局(随屏幕自适应)

首页 / 新闻资讯 / 正文

当一行有三个元素的时候直接加个伪类就行,三个以上就需要加占位元素了

<divclass="hot-content"><divclass="hotList"></div><divclass="pick"></div><divclass="pick"></div></div>

一行显示五个,多余换行

.hot-content{width: 100%;display:flex;justify-content: space-between;flex-wrap: wrap;text-align: justify;}.hot-content:after{content:'';width: 19%;}.pick{width: 19%;overflow: hidden;}.hotList{width: 19%;content:'';overflow: hidden;/* margin-right: 1.25%; */border-radius: 5px;margin-bottom: 1rem;}

四列加一个pick,五个加俩,一次类推