vue-element-ui组件 layout布局（网格系统）

首先你要掌握的基础知识:

.row 行概念

 

 

.col 列概念

 

 

col组件的:span属性的布局调整,一共分为24栏:

 

代码示例:

 

效果:

第一个:

第二个:

row组件的:gutter属性来调整布局之间的宽度---分栏间隔

代码示例:

 

效果:

 

 

Col组件的:offset属性调整方块的偏移位置（每次1格/24格）

 

 

效果:

 

对齐方式:

row组件的type="flex"启动flex布局，再通过row组件的justify属性调整排版方式，属性值分别有:

 

1. justify=center 居中对齐
2. justify=start 左对齐
3. justify=end 右对齐
4. justify=space-between 空格间距在中间对齐
5. justify=space-around 左右各占半格空格对齐

效果:

 

响应式布局:

参考bootstrap的响应式，预设四个尺寸

1. xs <768px
2. sm ≥768px
3. md ≥992
4. lg ≥120

使用方式:

 

练习示例:

 

1. 方块选择:

3. {{ option.name }}

 

data默认初始化数据:

1. selected: 0,

2. layouts: [

3. { 'name': '1x1模式', 'value': '0' },

4. { 'name': '2x1模式', 'value': '1' },

5. { 'name': '2x2模式', 'value': '2' },

6. { 'name': '3x2模式', 'value': '3' },

7. { 'name': '3x3模式', 'value': '4' },

8. { 'name': '1+5模式', 'value': '5' }

9. ],

 

布局代码: