一、基础布局(el-row、el-col)
|--布局规则:通过基础的24分栏,通过el-row、el-col组件,并通过col组件的span就可以自由地组合布局。
|--全局引入element css
|--可以在官网上在线主体编辑定义自己想要的颜色,然后下载,在main.js中引入。



|--示例1:占据100%(span=24)占据50%(span=12)


|--示例2:


二、分栏间隔
|--Row组件提供了gutter(排水沟)属性来指定每一栏之间的间隔(像水沟一样),默认间隔为0.
|--示例:这里个gutter=20,20是以px计算。


三、混合布局
|--通过基础的1/24分栏,任意扩展组合形成较为复杂的混合布局。


四、分栏偏移
|--通过col组件的offset(位移)属性可以指定偏移的栏数。


五、对齐方式
|--在row组件中设置type=flex,就可以启用flex布局,通过设置justify属性定义子元素的排版方式。
|--justify的值:start、end、center、space-between、space-around


六、响应式布局
|--参照了Bootstrap的响应式设计,预设置了5个响应尺寸:xs、sm、md、lg、xl





七、基于断点的隐藏
|--element额外提供了一系列类名,用于在某种添加下隐藏元素,这些类名可以添加在任何DOM元素或自定义组件上,如果想要使用,引入下面文件:

|--包含的类名及其含义:

|--示例:



简单的布局涉及到的问题就总结完毕了,没啥难度,重在总结实践!
网友评论