<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>

### Element UI 中 `el-row` 和 `el-col` 的布局示例及用法 #### 1. 基本概念 在前端开发中，布局是一个非常重要的环节。Element UI 是基于 Vue.js 的开源组件库，它提供了一系列用于构建复杂用户界面的工具和组件[^1]。其中，`el-row` 和 `el-col` 是实现栅格化布局的核心组件。 - **`el-row`**: 定义了一行容器，可以容纳多个子列 (`el-col`)。 - **`el-col`**: 定义了一个列，可以通过其属性控制该列所占比例以及样式。 #### 2. 关键属性说明 ##### (1) `gutter` `gutter` 属性定义了每列之间的间距，默认值为 0。如果需要设置列间的间隙，则可以在父级 `el-row` 上配置此属性。需要注意的是，只有当 `el-row` 配置了 `gutter` 并且有对应的 `el-col` 存在时，才会生效[^2]。 ```html <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-light"></div></el-col> </el-row> ``` ##### (2) `span` `span` 属性决定了当前列在整个网格中的占比，默认情况下整个网格被分为 24 份。因此，`span=8` 表示该列占据总宽度的 \( \frac{8}{24} = \frac{1}{3} \)[^2]。 ```html <el-row> <el-col :span="6">Span 6</el-col> <el-col :span="18">Span 18</el-col> </el-row> ``` ##### (3) Flexbox 对齐方式 为了更灵活地调整布局，`el-row` 支持通过 `type="flex"` 启用弹性盒子模型，并配合 `justify` 或 `align` 来设定水平或垂直方向上的对齐方式[^3]。 ```html <!-- 水平居中 --> <el-row type="flex" justify="center"> <el-col :span="12">Centered Content</el-col> </el-row> <!-- 垂直居中 --> <el-row type="flex" align="middle"> <el-col :span="12">Middle Aligned Content</el-col> </el-row> ``` --- #### 3. 实际应用案例 以下是几个常见的实际应用场景： ##### 示例 1: 设置列间间距 通过 `gutter` 属性，在两列之间创建一定的空间距离。 ```html <el-row :gutter="10"> <el-col :span="8"><div class="bg-purple-dark grid-content"></div></el-col> <el-col :span="16"><div class="bg-purple-dark grid-content"></div></el-col> </el-row> ``` ##### 示例 2: 自适应布局 利用不同屏幕尺寸下的响应式设计功能，动态调整各列的宽度。 ```html <el-row> <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4"> <div class="grid-content bg-purple"></div> </el-col> <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4"> <div class="grid-content bg-purple-light"></div> </el-col> </el-row> ``` ##### 示例 3: 灵活对齐 借助 `type="flex"` 及相关参数完成复杂的排列需求。 ```html <el-row type="flex" justify="space-between" align="middle"> <el-col :span="6">Left Column</el-col> <el-col :span="6">Right Column</el-col> </el-row> ``` --- ### 总结 以上介绍了如何使用 Element UI 的 `el-row` 和 `el-col` 进行基础到高级的各种布局操作。无论是简单的分栏还是复杂的自适应页面结构，都可以轻松应对[^1][^2][^3]。