学习elementui之旅

1，layout布局组件

通过基础24分栏，进行创建布局，将页面进行分割，每行分割若干列，最多支持一行24栏

<el-row >
      <el-col :span="6">
              <div style="background-color: antiquewhite">这个分栏占据6分</div>
      </el-col>
      <el-col :span="3">
              <div style="background-color: red">这个分栏占据3分</div>
      </el-col>
      <el-col :span="9">
              <div style="background-color: blue">这个分栏占据9分</div>
      </el-col>
      <el-col :span="6">
          <div style="background-color: black">这个分栏占据6分</div>
      </el-col>
 </el-row>
 

2，row和rol的属性

el-row表示行  el-col表示列

通过row的属性赋值flex justify-content：start  center end space-between，space-around排版

offset属性：设置分类起始位置 offset=6 从起始位置偏移六个分栏

gutter属性：栅格间隔

通过rol属性：span 栅格占据列数

                  offset 栅格左侧间隔数

                   push 栅格向右移动格数

                   pull栅格向左移动格数

                   xs sm md lg xl 响应式栅格数