上图

上代码

html部分

    <div class="list-container">
        <div v-for="(item,index) in selectList" :key="index" class="list">
          <span class="index break" style="width:20px">{{ index+1 }}</span>
          <span class="index break" style="width:50px">{{ item.Name }}</span>
          <span class="index break" style="width:100px">{{ item.UserObject }}</span>
          <el-button
            icon="icon-delete-blue "
            type="text"
            style="float:right;margin-top:2px"
            @click="del(item)"
          ></el-button>
        </div>
      </div>

css部分

    .list-container {
      max-height: 250px;
      width: 100%;
      overflow-y: scroll;
      //overflow: hidden;
      display: flex;
      flex-wrap: wrap;
      .list {
        height: 40px;
        width: calc(33.3% - 6.5px);
        padding: 0 10px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(236, 236, 236, 1);
        opacity: 1;
        margin: 10px 10px 0 0;
        box-sizing: border-box;
        &:nth-child(3n) {
          margin-right: 0;
        }
        &:hover {
          border-color: #afc3ff;
          cursor: pointer;
        }
      }
    }

关键点

1.确定每行3列，则在没有margin-right：10px情况下，每列占 calc(33.3%)
2.计算给个列占用的宽度 ——去掉3个列的margin-right（本来应是30px）
3.每行最后一列，margin-right:0 则减去20px,20px 平分到3列，一个平分约6.5px
4.确定 每列 width:calc(33.3% - 6.5px) 注意：这里减号前后都有空格，要不然无效
5.外面的父框： display: flex; flex-wrap: wrap;

  width: calc(33.3% - 6.5px)