vue vue-element-ui组件 <el-row> <el-col>

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

row 行概念

col 列概念

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

代码示例:

1 
2   

3  

效果展示:

 代码示例：

1 
2   

3 

效果展示:

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

代码示例:

1 
2   

3   

4 

效果:

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

1 
2   

3   

4 

效果:

对齐方式:

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

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

1 
2    

3  

效果:

 响应式布局:

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

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

使用方式:

1 
2   

3   

4   

5   

6 

练习示例:

1         方块选择:
2         
3           
4             
5                 {{ option.name }}
6             
7           

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       ],

布局代码:

样式(从里面对应取一下):

  1 

效果:

 侵删，原文链接：https://blog.csdn.net/jack_bob/article/details/79813114