vue-element-ui组件 layout布局系列学习(一)

首先你要掌握的基础知识:
.row 行概念

.col 列概念

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

 

          

 

效果:
第一个:
第二个:

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

 

 

效果:

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

 

 

效果:

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

justify=center 居中对齐
justify=start 左对齐
justify=end 右对齐
justify=space-between 空格间距在中间对齐
justify=space-around 左右各占半格空格对齐
 
   

 

效果:

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

xs <768px
sm ≥768px
md ≥992
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' }
      ],

布局代码:
   
     

           
           

           
               
                 
               
           

           
           

               
                 

                 

               
           

           
           

             
                 

                 

               
               

               
                 

                 

               
           

           
           

             
                 

                 

                 

               
               

               
                 

                 

                 

               
           

           
           

               
                 

                 

                 

               
               

               
                 

                 

                 

               
               

               
                 

                 

                 

               
           

           
           

               
                 

                 

                 

               
               

               
                   
                     

                     

                     

                     
                   

                 
           

         

   

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

效果:

--------------------- 
作者：jack_bob 
来源：CSDN 
原文：https://blog.csdn.net/jack_bob/article/details/79813114 
版权声明：本文为博主原创文章，转载请附上博文链接！