vue layout布局

1. 通过 row 和 col组件，并通过 span 属性实现布局 （一行中 col 的 span 加起来不能超过24）

<el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>

2. row 提供 gutter 属性指定列间隙 （一行中 col 的 span 加起来不能超过24）

<el-row :gutter="20"><el-row>

3. col 组件中 offset 属性可以实现列偏移

<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>

4. 通过 flex 布局实现分栏对齐， 同时可以使用 justify 属性设置一行居中，靠右或者间隔显示（justify = start, center, end, space-between, space-around ）

<el-row type="flex" class="row-bg" justify="space-between">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

5. 响应式布局。五个响应尺寸：xs、sm、md、lg 和 xl

   以及断点隐藏类：

• hidden-xs-only - 当视口在 xs 尺寸时隐藏

• hidden-sm-and-down - 当视口在 sm 及以下尺寸时隐藏

• hidden-sm-and-up - 当视口在 sm 及以上尺寸时隐藏

<el-row :gutter="10">
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>