Element-Ui组件(⼀)Layout布局
Element-Ui组件(⼀)Layout 布局
本⽂来源于Element官⽅⽂档:
基础⽤法
通过基础的 24 分栏,迅速简便地创建布局。html的flex布局
<el-row>
<el-col :span="24">插⼊内容</el-col>
</el-row>
<el-row>
<el-col :span="12">插⼊内容</el-col>
<el-col :span="12">插⼊内容</el-col>
</el-row>
el-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 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
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论