如何用el-row设置排列

`el-row` 是 Element UI 组件库中用于布局的组件之一，可以用来设置元素的排列方式。下面是一些示例：

### 水平排列

使用 `justify` 属性可以设置元素沿水平方向的排列方式：

<template>
  <el-row justify="center">
    <el-col>col1</el-col>
    <el-col>col2</el-col>
    <el-col>col3</el-col>
  </el-row>
</template>

上述示例中，元素会在水平方向上居中对齐。其他可用的值包括 `start`、`end`、`space-between` 和 `space-around`。

### 垂直排列

使用 `align` 属性可以设置元素沿垂直方向的排列方式：

<template>
  <el-row :gutter="20" align="middle">
    <el-col :span="8">col1</el-col>
    <el-col :span="8">col2</el-col>
    <el-col :span="8">col3</el-col>
  </el-row>
</template>

上述示例中，元素会在垂直方向上居中对齐。其他可用的值包括 `top`、`bottom` 和 `baseline`。

### 混合排列

`el-row` 组件同时支持 `justify` 和 `align` 属性，因此可以同时设置水平和垂直方向上的排列方式：

<template>
  <el-row justify="space-around" align="middle">
    <el-col :span="6">col1</el-col>
    <el-col :span="6">col2</el-col>
    <el-col :span="6">col3</el-col>
    <el-col :span="6">col4</el-col>
  </el-row>
</template>

上述示例中，元素会在水平方向上等间距排列，并在垂直方向上居中对齐。