flex卡片布局（随屏幕自适应）

2022年6月9日09:16:37

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

<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,五个加俩，一次类推

  • 作者：一颗青柠~
  • 原文链接：https://blog.csdn.net/qq_44711316/article/details/123900566
    更新时间：2022年6月9日09:16:37 ，共 448 字。