css list布局 高端玩法

这种布局方式 通常父级item 使用display:flex; 子集list使用margin-right margin-bottom撑开距离 然后得纠结最后一个子集的margin什么的

有个新思路子集使用padding

      
        
          
            
            
              
            
            
              {{ item.width }}x{{ item.height }}
              {{ item.duration }}
            
          
          {{ item.file_name }}
        
      
.video-footer{ font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.video-list-cont .s1,.video-list-cont .s2{ padding: 0 6px; background: rgba(0,0,0,.6); color: #fff; border: 1px solid hsla(0,0%,100%,.5); border-radius: 8px;}
.video-list-cont .d1 .s2{ margin-left: 4px;}
.video-list-cont .d1{ position: absolute; bottom: 4px; left: 0; display: flex; width: 100%; justify-content: center;}
.video-list .c1{ position: absolute; top: 8px; right: 8px;}
.video-img{ width: 100%; height: 100%;}
.video-img-wrap{ width: auto; height: 174px;}
.video-list-cont{ position: relative; display: flex; justify-content: center; background: #f2f2f2; font-size: 12px; cursor: pointer; border-radius: 4px;}
.video-list{ padding: 6px; width: 20%; box-sizing: border-box;}
.video-box{ padding: 0 10px; display: flex; flex-wrap: wrap;}