element-ui 基础布局

Container 布局容器

基础用法

el-container：外层容器。当子元素中有 el-header 或 el-footer时，全部子元素会垂直上下排列，否则会水平左右排列。

el-header：顶栏容器。

el-aside：侧边栏容器。

el-main：主要区域容器。

el-footer：底栏容器。

  Header
  
    Aside
    
      Main
      Footer
    
  

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栏。

参数	类型	说明	可选值	默认值
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属性来调整布局之间的宽度。

3.分栏漂移

通过Col组件的:offset属性调整栅格的偏移位置（每次1格/24格）。

4.对齐方式

通过Row组件的type="flex"启动flex布局，再通过Row组件的justify属性调整排版方式，属性值分别有

start 居前（默认）
center 居中
end 居后
space-between 分布自适应（两边–中间，两边没有空隙）
around （中间–两边，两边会有空隙）
 

5.响应式布局

参考bootstrap的响应式，预设四个尺寸

1. xs <768px
2. sm ≥768px
3. md ≥992
4. lg ≥1200

ICON图标

今后可以使用来做图标，给其class添加el-icon-iconName即可。 
可以在上添加icon属性。

搜索

参考https://blog.csdn.net/jack_bob/article/details/79813114