Element UI ：栅格布局

2022-01-13

介绍

文档地址

代码栗子

<el-row :gutter="20"  type="flex">
  <el-col :span="12" :xs="8" :sm="6" :md="4" :lg="3" :xl="1"></el-col>
  <el-col :span="12"></el-col>
</el-row>

<el-row>代表行,里面嵌套<el-col>，

<el-row>里面有gutter属性，属性为数字，则gutter前面加冒号,gutter属性代表<el-col>的间隔，默认间隔为0。

<el-col>里面有span属性，span为x，则分成 24/x 列（栅格布局一行分为24栏）。

<el-col>里必须有<div>，不然span分割无效。

对齐方式

<el-row>使用flex属性，就可以用flex作为对齐方式。

响应式布局

参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。