ElementUI之Layout布局 基础布局 整个宽度分为24份，通过span属性来定义元素的宽度占多少

最编程 2024-01-12 13:17:54

...

ElementUI之Layout布局

基础布局

整个宽度分为24份，通过span属性来定义元素的宽度占多少

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

分栏间隔

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

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

混合布局

通过基础的1/24分栏任意扩展组合形成为复杂的混合布局

<el-row :gutter="20">
  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<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-row 

上一篇： 总结css中不同的居中方法

下一篇： CSS样式: 实现div水平垂直居中的方法

推荐阅读

• ElementUI之Layout布局 基础布局 整个宽度分为24份，通过span属性来定义元素的宽度占多少