css 宫格样式内容上下结构

结构

<div  class="sc-content-group">
     <div class="sc-content-item">
         <div class="sc-item-img"><el-image :src="src" :preview-src-list="[src]"></el-image></div>
         <div class="sc-item-check"><el-checkbox v-model="checked">存在缺陷</el-checkbox></div>
      </div>
         <div class="sc-content-item">
         <div class="sc-item-img"><el-image :src="src" :preview-src-list="[src]"></el-image></div>
         <div class="sc-item-check"><el-checkbox v-model="checked">存在缺陷</el-checkbox></div>
      </div>
</div>

样式

 .sc-content-group {
    display: flex;
    flex-wrap: wrap;  //一行超出 换行
  }
  .sc-content-item {
    padding: 5px;
    display: flex;
    flex-direction: column; //内容上下
  }
    .sc-item-img{
    height: 90px;
    width: 120px;
  }
  .sc-item-check{
    padding-left: 15px;
  }