elementUI 学习入门之 layout 布局

layout 布局

　　通过基础的 24 分栏，可进行快速布局

　　基础布局

　　　　使用单一分栏创建基础的栅格布局, 通过 span 属性指定每栏的大小

　　　　<el-col :span="8"></el-col>

 <el-row>
   <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
   <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
   <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
 </el-row>

基础分栏

　　分栏间隔

　　　　row 组件提供 gutter 属性指定每栏之间的间隔，默认为0

　　　　<el-row :gutter="10"></el-row>

　　混合布局

　　　　根据指定 span 属性值大小不同，每栏大小不一样进行混合布局

 <el-row :gutter="20">
   <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
   <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
   <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
   <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
 </el-row>

混合布局

　　分栏偏移

　　　　通过指定 el-col 组件中 属性 offset 的值对每栏进行偏移控制。eg：offset="6" ，使其向右偏移 6 栏大小

　　　　<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>

　　对齐方式

　　　　将 row 组件中的 type 属性赋值为 flex，并通过 justify 属性指定 start、center、end、space-between、space-around 其中的值来定义子元素的排版

 <el-row type="flex" class="row-bg">
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
 </el-row>
 <el-row type="flex" class="row-bg" justify="center">
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
 </el-row>
 <el-row type="flex" class="row-bg" justify="end">
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
 </el-row>
 <el-row type="flex" class="row-bg" justify="space-between">
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
 </el-row>
 <el-row type="flex" class="row-bg" justify="space-around">
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
 </el-row>

对齐方式

　　　　样式显示为：

　　　　

　　响应式布局

　　　　参照 bootstrap 的响应式设计，预设了五个响应尺寸，xs、sm、md、lg、xl。当显示大小 从最小到最大时，响应依次为 xs、sm、md、lg、xl

 <el-row :gutter="10">
   <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
   <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
   <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
   <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
 </el-row>

响应式布局

其中用到的样式为（不包括响应式布局样式）：

 <style>
   .el-row {
     margin-bottom: 20px;
     &:last-child {
       margin-bottom: 0;
     }
   }
   .el-col {
     border-radius: 4px;
   }
   .bg-purple-dark {
     background: #99a9bf;
   }
   .bg-purple {
     background: #d3dce6;
   }
   .bg-purple-light {
     background: #e5e9f2;
   }
   .grid-content {
     border-radius: 4px;
     min-height: 36px;
   }
   .row-bg {
     padding: 10px 0;
     background-color: #f9fafc;
   }
 </style>

样式

详细参数说明 ：