flex布局遍历图片整齐排列 使用row column属性布局来遍历图片数组会出现随机遍历排列。 flex布局遍历图片数组不会乱序。 html代码如下：<div class="el_image"> <div v-for="(item,index) in urls" :key="index" > <viewer :images="item" class="viewer" ref="viewer" :title="false"> <img :src="item" :key="index" style="width: 170px"> </viewer> <div style="text-align: center"> <el-tooltip class="classDelete" effect="dark" content="删除" placement="top"> <span class="Delete" @click="deleteImg(item,index)"><i class="el-icon-delete"></i></span> </el-tooltip> </div> </div> </div>css代码如下：.el_image{ display: flex; flex-direction: row; width: 100%; flex-wrap: wrap; justify-content: space-evenly; }flex-direction:row 表示一列一列的排列。width: 100%; 表示这一行的空间大小flex-wrap: wrap ; 表示占满空间后自动换行；justify-content: space-evenly; 表示给每张图片的间隔和左右两边留空白空间看着美观。数组代码如下：imgLink1:[ 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg', 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg', 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg', 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg', ], imgLink2:[ 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg', 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg', 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg', 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg', 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg', 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg', 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg', 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg', ],