vue 之element-ui Layout 布局

vue 之 element Layout 布局

 1.//<el-row></el-row>行元素，布局最外层容器，里面子元素如果浮动以后，一般父级可以不清除浮动，
 2. <el-row :gutter="20" type="flex" justify="center" align="top">
 3.	 	//<el-col></el-col>块级元素，布局里层容器
 4. 	<el-col :span="24" :offset="6" :xs="8" :sm="6" :md="4" :lg="3" :xl="1"></el-col>
 5. </el-row>

注解 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

注解 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

引用element-ui，element-ui地址