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
justifyflex 布局下的水平排列方式stringstart/end/center/space-around/space-betweenstart
alignflex 布局下的垂直排列方式stringtop/middle/bottomtop
tag自定义元素标签string*div

注解 col 标签

参数说明类型可选值默认值
span栅格占据的列数number24
offset栅格左侧的间隔格数number0
push栅格向右移动格数number0
pull栅格向左移动格数number0
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地址

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐