vue 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

使用方式:

 

练习示例:

 

        方块选择:
        
          
            
                {{ option.name }}
            
          

 

data默认初始化数据:

      selected: 0,
      layouts: [
        { 'name': '1x1模式', 'value': '0' },
        { 'name': '2x1模式', 'value': '1' },
        { 'name': '2x2模式', 'value': '2' },
        { 'name': '3x2模式', 'value': '3' },
        { 'name': '3x3模式', 'value': '4' },
        { 'name': '1+5模式', 'value': '5' }
      ],

 

布局代码:

 

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

效果: