flex 三列多行布局

查看效果圖

 

 

參考其他朋友的實現思路，

添加一行隱藏的元素占位，然后列表元素設置 flex。

<template>
  <div>
    <div class="image">
      <ul>
        <li v-for="(item, index) in list" :key="index">{{item}}</li>
        <li class="bt_classify_name_empty" style="visibility: hidden"></li>
      </ul>
      <button @click="addImage">添加圖片</button>
    </div>
  </div>
</template>

<script>
  export default {
  data() {
    return {
      list: [],
      a: 0
    };
  },
  methods: {
    addImage () {
      this.a += 1;
      this.list.unshift(this.a);
    }
  },
}
</script>

<style lang='less' scoped>
.image {
  ul {
    padding: 0;
    margin: 0;
    list-style: none;
    padding: 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      flex: 0 0 30%;
      height: 6rem;
      display: inline-block;
      background: #ededee;
      margin-bottom: 1rem;
      text-align: center;
    }
    .bt_classify_name_empty {
      width: 0px;
      height: 0px;
    }
  }
}
</style>