element-plus的Layout组件

最新推荐文章于 2026-04-19 05:24:32 发布

原创

最新推荐文章于 2026-04-19 05:24:32 发布 · 729 阅读

标签

#javascript #前端 #开发语言 #elementui

收录于

elment-plus的layout组件包括el-row和e-col，和bootstrap的栅格类似，e-row采用flex布局，分成了24个栅栏，单个e-col默认占24,可以通过span属性指定其大小，offset属性指定其偏移的栅栏个数。e-row组件的父组件不要使用display的inline的属性，否则会导致组件无法撑开。

用法

<template>
  <div>
      <el-row :gutter="20" justify="start">
        <el-col :span="6"  ><div class="item">123</div></el-col>
        <el-col :span="6"  ><div class="item">456</div></el-col>
        <el-col :span="6"  ><div class="item">789</div></el-col>
        <el-col :span="6"  ><div class="item">10</div></el-col>
      </el-row>

      <el-row :gutter="500" justify="center">
        <el-col :span="24" :offset="0" ><div class="item">789</div></el-col>
      </el-row>
      
    </div>
     
      
</template>

<style scoped>

.item{
  background-color: red;
  justify-content:left;
  heigh