elment-plus的layout组件包括el-row和e-col,和bootstrap的栅格类似,e-row采用flex布局,分成了24个栅栏,单个e-col默认占24,可以通过span属性指定其大小,offset属性指定其偏移的栅栏个数。e-row组件的父组件不要使用display的inline的属性,否则会导致组件无法撑开。
用法
<template><div><el-row :gutter="20" justify="start"><el-col :span="6" ><div class="item">123</div></el-col><el-col :span="6" ><div class="item">456</div></el-col><el-col :span="6" ><div class="item">789</div></el-col><el-col :span="6" ><div class="item">10</div></el-col></el-row><el-row :gutter="500" justify="center"><el-col :span="24" :offset="0" ><div class="item">789</div></el-col></el-row></div></template><style scoped>.item{background-color: red;justify-content:left;height: 100px;
}</style>
具体文档见官方
https://element-plus.org/zh-CN/component/layout.html#row-attributes