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地址

猜你喜欢

转载自blog.csdn.net/qq_37805723/article/details/83412379