Container 布局容器
基础用法
el-container：外层容器。当子元素中有 el-header 或 el-footer时，全部子元素会垂直上下排列，否则会水平左右排列。
el-header：顶栏容器。
el-aside：侧边栏容器。
el-main：主要区域容器。
el-footer：底栏容器。
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</el-container>el-container属性：
| 参数 | 类型 | 说明 | 可选值 | 默认值 |
|---|---|---|---|---|
| direction | 子元素的排列方向 | string | horizontal / vertical | 子元素中有 el-header 或 el-footer 时为 vertical，否则为 horizontal |
el-header属性：
| 参数 | 类型 | 说明 | 可选值 | 默认值 |
|---|---|---|---|---|
| height | 顶栏高度 | string | — | 60px |
el-aside 属性：
| 参数 | 类型 | 说明 | 可选值 | 默认值 |
|---|---|---|---|---|
| width | 侧边栏宽度 | string | — | 300px |
el-footer属性：
| 参数 | 类型 | 说明 | 可选值 | 默认值 |
|---|---|---|---|---|
| height | 底栏高度 | string | — | 60px |
1.创建布局
通过Col组件的:span属性调整Layout布局，分为24栏。
el-row>
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>| 参数 | 类型 | 说明 | 可选值 | 默认值 |
|---|---|---|---|---|
| gutter | 栅格间隔 | number | — | 0 |
| type | 布局模式，可选 flex，现代浏览器下有效 | string | — | — |
| justify | flex 布局下的水平排列方式 | string | start/end/center/space-around/space-between | start |
| align | flex 布局下的垂直排列方式 | string | top/middle/bottom | top |
| tag | 自定义元素标签 | string | * | div |
el-col 属性：
| 参数 | 类型 | 说明 | 可选值 | 默认值 |
|---|---|---|---|---|
| span | 栅格占据的列数 | number | — | 24 |
| offset | 栅格左侧的间隔格数 | number | — | 0 |
| push | 栅格向右移动格数 | number | — | 0 |
| pull | 栅格向左移动格数 | number | — | 0 |
| xs | <768px 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
| sm | ≥768px 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
| md | ≥992px 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
| lg | ≥1200px 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
| xl | ≥1920px 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
| tag | 自定义元素标签 | string | * | div |
2.分栏间隔
通过Row组件的:gutter属性来调整布局之间的宽度。
<el-row :gutter="20">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>3.分栏漂移
通过Col组件的:offset属性调整栅格的偏移位置（每次1格/24格）。
<el-row :gutter="20">
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>4.对齐方式
通过Row组件的type="flex"启动flex布局，再通过Row组件的justify属性调整排版方式，属性值分别有
start 居前（默认）
center 居中
end 居后
space-between 分布自适应（两边–中间，两边没有空隙）
around （中间–两边，两边会有空隙）
<el-row type="flex" class="row-bg" justify="center">
<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-row>5.响应式布局
参考bootstrap的响应式，预设四个尺寸
- xs <768px
- sm ≥768px
- md ≥992
- lg ≥1200
<el-row :gutter="10">
<el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>ICON图标
今后可以使用<i>来做图标，给其class添加el-icon-iconName即可。
可以在<button>上添加icon属性。
<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="search">搜索</el-button>