elementUI 学习入门之 layout 布局

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>

样式

详细参数说明 ：