ElementUI 组件Layout布局 el-row和el-col 简介

ElementUI 的 el-row 和 el-col 组件是用于构建布局系统的重要组成部分，它们是基于 Flexbox 布局模型设计的。

el-row 是一个行容器，它能够包含多个 el-col 列布局。

el-col 是一个列组件，它可以作为 el-row 的直接子元素，用于进一步划分行容器的空间。

以下是一个简单的使用示例：

<template>
  <el-row>
    <el-col :span="12"><div class="grid-content bg-purple-dark">1/2</div></el-col>
    <el-col :span="12"><div class="grid-content bg-purple">1/2</div></el-col>
  </el-row>
  <el-row>
    <el-col :span="8"><div class="grid-content bg-purple-dark">1/3</div></el-col>
    <el-col :span="8"><div class="grid-content bg-purple">1/3</div></el-col>
    <el-col :span="8"><div class="grid-content bg-purple-light">1/3</div></el-col>
  </el-row>
</template>
 
<style>
.el-row {
  margin-bottom: 20px;
}
.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;
}
</style>

在这个例子中，el-row 是一个水平的布局容器，它可以包含多个 el-col。每个 el-col 的 span 属性决定了它占用的列宽。例如，span="12" 表示该列占行宽的一半，span="8" 表示该列占行宽的三分之一。

el-row 组件之间的间距可以通过外部或内部样式来设置，例如上面的 margin-bottom: 20px;。每个 el-col 的背景颜色和边框设置是为了视觉效果。