先看效果：

在看代码

<template>
  <div class="outer">
    <div class="inner">
      <div class='each_image' v-for="(item,index) in image_list" :key="index">
        <img class="image_class" src="./assets/logo.png" alt="">
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      image_list:["./assets/logo.png","../assets/logo.png","../assets/logo.png","../assets/logo.png","../assets/logo.png","../assets/logo.png","../assets/logo.png","../assets/logo.png","../assets/logo.png","../assets/logo.png"]
    }
  },
}
</script>

<style lang="less">
.outer{
  width: 90%;
  height: 100vh;
  margin: 0 auto;

  .inner{
    width: 100%;
    height: 100%;
    margin-top: 20px;
    background-color: pink;

    // 一下内容是重点 让子元素进行flex 布局
    display: flex;
    // 一行容不下就拐弯
    flex-wrap: wrap;
    .each_image{
      flex-basis: 25%; // 项目占据主轴（父容器宽）的空间。 和父容器的flex配合使用来控制当前元素
      //border: 1px solid blue;
      height: 250px;
	  // 下边这个flex 是用来控制子元素(image_class)居中的
      display: flex;
      align-items: center;
      justify-content: center;
      
      .image_class{
        border: 1px solid black;
        width: 200px;
        height: 200px;
      }
    }
  }
}
</style>