flex 布局解决最后一个布局问题

当我们使用flex布局，可以自动换行的时候，经常会出现最后一个布局，没有自动跟在最后一个。因为我们设置flex的content属性是space-between。

    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;

原始效果

目标效果

解决办法：
通过给父级添加after伪类法，解决最后一排数量不够两端分布的情况。
原理：after伪类是在最后的时候，添加一个对应的css，这种三等分的情况，最后一个宽度要设置33%。给一个高度，占位。

<template>
  <div class="tem-flex">
    <div class="tem-list" v-for="(item, index) in count" :key="index">列表</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 14,
    };
  },
};
</script>

<style scoped>
.tem-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: justify;
}

.tem-flex:after {
  content: "";
  width: 30%;
  height: 10px;
}
.tem-list {
  width: 30%;
  border: 1px solid #ff6600;
  margin-bottom: 10px;
}
</style>