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',
],