elementui col row

### ElementUI 的 `el-row` 和 `el-col` 布局组件 ElementUI 提供了一套灵活的栅格化布局系统，通过组合 `el-row`（行）和 `el-col`（列），可以快速构建响应式的页面结构。 #### 行 (Row) `el-row` 是用于创建行容器的基础组件。可以通过设置属性来控制其行为： - **gutter**: 设置栅格之间的间距，默认为0。 - **type**: 支持 flex 布局，使子元素能够更方便地居中或排列。 - **justify**: 当 type 为 'flex' 时有效，定义了主轴上的对齐方式。 - **align**: 同样仅当 type 为 'flex' 生效，决定了交叉轴方向上的对齐情况。 ```html <el-row :gutter="20"> <!-- 列的内容 --> </el-row> ``` #### 列 (Column) `el-col` 定义每一栏的具体宽度以及偏移量等特性： - **span**: 占据多少份宽屏空间，默认总共有24分之一屏幕宽度。 - **offset**: 左边距所占份数。 - **push / pull**: 右推左拉效果，单位也是基于 span 计算得出。 ```html <template> <div id="app"> <el-container style="height: 500px; border: 1px solid #eee;"> <el-header style="text-align: right; font-size: 12px">Header</el-header> <el-main> <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-col :span="8"><div class="grid-content bg-purple"></div></el-col> </el-row> <el-row> <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6" :offset="6"><div class="grid-content bg-purple-light"></div></el-col> </el-row> </el-main> <el-footer>Footer</el-footer> </el-container> </div> </template> <style scoped> .el-header, .el-footer { background-color: #B3C0D1; color: #333; text-align: center; line-height: 60px; } .grid-content { min-height: 36px; } .bg-purple {background: #d3dce6;} .bg-purple-light {background: #e5e9f2;} </style> ``` 此示例展示了如何利用 `el-row` 和 `el-col` 创建两组不同样式和间隔的三列布局，并且第二组应用了偏移以实现错位显示的效果[^1]。