el-row和el-col

el-row 和 el-col 是 Element UI 框架中的布局组件。Element UI 是一个基于 Vue.js 的前端组件库，它提供了一套丰富的 UI 组件，用于构建网页和应用程序的用户界面。

• el-row：表示行组件，用于创建一个水平的布局容器。在 Element UI 中，el-row 通常与 el-col 组件一起使用，以实现响应式布局。

• el-col：表示列组件，用于在 el-row 容器内创建列。el-row 内的 el-col 可以设置不同的 span 属性来分配不同的宽度比例，以适应不同的屏幕尺寸。

以下是一些基本用法示例：

<!-- 基本的行和列 -->
<el-row>
  <el-col :span="24">一个全宽的列</el-col>
</el-row>

<!-- 响应式布局 -->
<el-row>
  <el-col :span="8">占8格的列</el-col>
  <el-col :span="8">占8格的列</el-col>
  <el-col :span="8">占8格的列</el-col>
</el-row>

<!-- 栅格偏移 -->
<el-row>
  <el-col :span="8" :offset="8">偏移8格的列</el-col>
</el-row>

<!-- 栅格对齐 -->
<el-row type="flex" justify="center">
  <el-col :span="6">居中的列</el-col>
</el-row>

在这些示例中，:span 属性用于指定列的宽度，:offset 属性用于指定列的偏移量。type="flex" 和 justify="center" 是 Flexbox 布局的属性，用于实现列的居中对齐。

Element UI 的官方文档提供了更多关于 el-row 和 el-col 的详细用法和高级配置选项，你可以访问 Element UI 官网 来获取更多信息。