Element UI组件中el-col、el-row布局学习笔记

一、简介

el-col:列。是Element UI布局中的核心组件,他的作用的将一行分成24个网格,为了方便我们在不同的设备上适配不同的屏幕大小。我们可以通过指定span属性来确定一行中所占的网格数。

el-row:行。包裹在el-col外层,其中可以有无数个el-col。

    
      
        

Element UI组件中el-col、el-row布局学习笔记_第1张图片 

在正常形态下,:span默认为24。假如:span为12,那么就是原本列数的一半。

    
      
        

Element UI组件中el-col、el-row布局学习笔记_第2张图片  

二、el-row的属性:

:gutter  调整布局之间的宽度---分栏间隔。(也就是两列之间的间隔距离)

原代码:

    
      
        

Element UI组件中el-col、el-row布局学习笔记_第3张图片

 如果两个div间需要间隔以示区分。就用:gutter属性。

    
      
        

Element UI组件中el-col、el-row布局学习笔记_第4张图片

 然而在网页页面代码中,其代码显示为:

Element UI组件中el-col、el-row布局学习笔记_第5张图片

 也就是说,:gutter属性其实是设置了div的padding属性。

三、el-col属性

(1):offset  调整方块的位置(每次1格/24格)

    
      
        

Element UI组件中el-col、el-row布局学习笔记_第6张图片

(2) :push 向右移动格数,值为1-24之间整数

    
      
        

Element UI组件中el-col、el-row布局学习笔记_第7张图片 

 

(3):pull 向左移动格数,值为1-24之间整数

    
      
        

Element UI组件中el-col、el-row布局学习笔记_第8张图片 

 (4)Element UI响应式布局

xs:<768px 响应式栅格数或者属性对象,超小屏,比如手机。例如:{ span: 4, offset: 8 }

sm:≥768px 响应式栅格数或者属性对象,小屏幕,比如平板。例如:{ span: 4, offset: 8 }

md:≥992px 响应式栅格数或者属性对象,中等屏幕,比如桌面显示器。例如:{ span: 4, offset: 8 }

lg:≥1200px 响应式栅格数或者属性对象,大屏幕,比如大桌面显示器。例如:{ span: 4, offset: 8 }

xl:≥1920px 响应式栅格数或者属性对象,超大屏幕显示器,比如2k屏等。例如:{ span: 4, offset: 8 }

 三、对齐方式

通过设置type="flex",启动flex布局,通过justify的属性调整排版方式。

justify都属性值:center 居中对齐 start 左对齐 end 右对齐 space-between 空格间距在中间对齐 space-around 左右各占半格空格对齐

    
      
        

Element UI组件中el-col、el-row布局学习笔记_第9张图片

 

你可能感兴趣的:(element-ui,vue.js,elementui,前端)