element常用布局总结

之前的需求都是自己写布局 多多少少会浪费些时间 也容易出问题
今天看到element官方有布局模式，总结下以备不时之需

Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构：

<el-aside>：侧边栏容器。
<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，
				否则会水平左右排列。
<el-header>：顶栏容器。
<el-main>：主要区域容器。
<el-footer>：底栏容器。

<el-container>与<el-aside>注意嵌套次序

<el-container>
  <el-aside width="200px">Aside</el-aside>
  <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
    <el-footer>Footer</el-footer>
  </el-container>
</el-container>

Layout 布局

• 通过 row 和 col 组件，并通过 col 组件的 span (24)属性我们就可以自由地组合布局。
• el-row 的 gutter 属性指定每一栏之间的间隔。
• el-row 的 type 属性赋值为 ‘flex’，可以启用 flex 布局，justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。
• el-col 的 offset 属性可以指定分栏偏移的栏数。
• 参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。

官网案例