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>