elementUI--layout 布局

1. 基础布局：通过col组件的:span属性调整layout布局，分为24栏

el-col 的span默认为24栏

<el-row>

    <el-col :span="24"></el-col>

</el-row>

2. 分栏间隔：通过row组件的:gutter属性来调整布局之间的宽度；

<el-row :gutter="20">
  <el-col :span="6"></el-col>
  <el-col :span="6"></el-col>
</el-row>

3. 分栏漂移：通过col的:offset属性调整栅格的偏移位置(每次一格/24格)

<el-row :gutter="20">
  <el-col :span="6" :offset="6"></el-col>
  <el-col :span="6" :offset="6"></el-col>
</el-row>

4.对齐方式：通过row组件的type="flex"启动flex布局，再通过row组件的juatify属性调整排版方式，属性值有以下几种：

start 居前(默认)

center 居中

end 居后

space-between 分布自适应(两边-中间，两边没有空隙)

around (中间-两边，两边会有空隙)

<el-row type="flex" class="row-bg" justify="center">
  <el-col :span="6"></el-col>
  <el-col :span="6"></el-col>
</el-row>

5. 响应式布局：参考bootstrap的响应式，预设四个尺寸：

xs < 768px

sm >768 px

md >992 px

lg >1200 px

<el-row :gutter="10">
  <el-col :xs="8" :sm="6" :md="4" :lg="3"></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9"></div></el-col>
  <el-col :xs="8" :sm="6" :md="4" :lg="3"></div></el-col>
</el-row>