flex的布局最后不能盛满一行时如何依旧布局一致，左对齐呢？

☀☀☀☀☀☀☀☀☀☀☀☀错误的效果

当使用flex排版时候发现，我想要下面的效果，但是由于我只有五个元素，最后一行元素，不满三个就会变成，这样的排版，但是不符合我的预期。

????????? 正确的效果

以前的flex并不能满足我的需求，那么就找到了grid。

/* .list{
			display: flex;
			justify-content: space-between;
			height: 50px;
			width: 70px;
			background-color: pink;
			flex-wrap: wrap;
        } */
		.list {
			display: grid;
			grid-row-gap: 2px;
			grid-column-gap: 2px;
			grid-template-columns: repeat(auto-fill, 20px);
			width: 70px;
			background-color: pink;
		}

		.item {
			background-color: blue;
			height: 20px;
			width: 20px;

		}

	<div class="list">
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
	</div>

如若需要，自行查阅 ?????? Grid

添加空格子

这种是我在网上发现的,感觉还不错.针对后面添加空格基础上,对于不确定列数的时候可以使用

 <template>
  <div class="tem-flex">
    <div class="tem-list" v-for="item in len">弹性布局</div>
    <div class="list" v-for="item in (rowNum-len%rowNum)" v-if="len%rowNum > 0"></div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        len : 14,
        rowNum: 4  // rowNum即是每列元素的个数，4列，5列。。。更改这个值即可
      }
    },
  }
</script>
<style scoped>
  .tem-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    justify-items: center;
    text-align: justify;
  }
  .list {
    content: '';
    width: 20%;
    border:1px solid transparent;
    padding: 5px;
    overflow: hidden;
  }
  .tem-list {
    width:20%;
    border:1px solid #ff6600;
    margin-bottom: 10px;
    padding: 10px 5px;
    display: flex;
    justify-content: center;
  }
</style>