1,layout布局组件
通过基础24分栏,进行创建布局,将页面进行分割,每行分割若干列,最多支持一行24栏
<el-row >
<el-col :span="6">
<div style="background-color: antiquewhite">这个分栏占据6分</div>
</el-col>
<el-col :span="3">
<div style="background-color: red">这个分栏占据3分</div>
</el-col>
<el-col :span="9">
<div style="background-color: blue">这个分栏占据9分</div>
</el-col>
<el-col :span="6">
<div style="background-color: black">这个分栏占据6分</div>
</el-col>
</el-row>
2,row和rol的属性
el-row表示行 el-col表示列
通过row的属性赋值flex justify-content:start center end space-between,space-around排版
offset属性:设置分类起始位置 offset=6 从起始位置偏移六个分栏
gutter属性:栅格间隔
通过rol属性:span 栅格占据列数
offset 栅格左侧间隔数
push 栅格向右移动格数
pull栅格向左移动格数
xs sm md lg xl 响应式栅格数