vue 之element-ui Layout 布局
vue 之 element Layout 布局//<el-row></el-row>布局最外层容器，里面子元素如果浮动以后，一般父级可以不清除浮动，1. <el-row>2
·
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地址
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献3条内容
所有评论(0)