ElementUI中使用＜el-row＞自适应布局导致显示错乱

 

错乱代码（部分）：

<el-row :gutter="5">
　　<el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(item, index) in caseList" :key="index"> 
　　　　<img :src="baseUrl + item.busCaseImage" :alt="item.busCaseDesc" style="width: 100px;height: auto;max-width: 100%; max-height: 100%">
　　</el-col>
</el-row> 

经研究查询：将el-col全部放到el-row中，可能会出现分辨率或缩放、内容不同导致el-col高度不一致，而使布局异常。

解决方案：el-row添加flex布局，设置flex-wrap:wrap即可。

修改后的代码：

<el-row :gutter="5" type="flex" style="flex-wrap:wrap">
　　<el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(item, index) in caseList" :key="index"> 
　　　　<img :src="baseUrl + item.busCaseImage" :alt="item.busCaseDesc" style="width: 100px;height: auto;max-width: 100%; max-height: 100%">
　　</el-col>
</el-row>