el-row有哪些参数
时间: 2025-05-21 09:55:07 浏览: 20
### 关于 `el-row` 组件的参数列表
以下是关于 Element-UI 中 `el-row` 的官方文档所定义的参数及其说明:
#### 参数表
| 参数名 | 类型 | 默认值 | 可选值 | 描述 |
|--------|------|---------|----------|-------|
| `gutter` | Number | 0 | —— | 设置栅格之间的间距,单位为像素(px)[^1]。 |
| `type` | String | —— | flex | 当布局模式为 `flex` 时启用弹性盒子布局[^2]。 |
| `justify` | String | start | start/end/center/space-around/space-between | 在 `type="flex"` 下有效,用于设置主轴上的对齐方式[^3]。 |
| `align` | String | top | top/middle/bottom | 在 `type="flex"` 下有效,用于设置交叉轴上的对齐方式[^4]。 |
#### 示例代码
以下是一个简单的例子展示如何使用这些参数:
```html
<el-row :gutter="20">
<el-col :span="8"><div class="grid-content bg-purple">A</div></el-col>
<el-col :span="8"><div class="grid-content bg-purple-light">B</div></el-col>
<el-col :span="8"><div class="grid-content bg-purple">C</div></el-col>
</el-row>
<el-row type="flex" justify="space-around" align="middle">
<el-col :span="6"><div class="grid-content bg-purple">D</div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light">E</div></el-col>
</el-row>
```
上述代码展示了两种不同的布局形式:一种通过 `gutter` 来控制列间的间隔;另一种则利用了 `flex` 布局来实现更灵活的内容排列。
---
#### 解决方案补充
如果遇到页面缩放时出现空行的情况,可以尝试调整子元素(即 `el-col` 或其内部嵌套内容)的宽度计算逻辑,避免为其设定固定的宽度属性[^1]。此外,在某些复杂场景下,可能还需要额外清除浮动或者优化 CSS 样式以确保整体布局的一致性。
对于因配合其他组件(如 `el-form`)而导致样式错乱的现象,则需仔细检查是否存在冲突性的样式声明,并适当增加自定义类名来进行针对性修复。
---
阅读全文
相关推荐


















