elementui row

ElementUI 的 Row 组件

ElementUI 的 el-row 组件用于实现栅格布局，基于 Flex 布局设计，支持响应式。以下是其核心功能和用法：

基本用法

通过 el-row 和 el-col 组合实现布局，el-col 需嵌套在 el-row 内。默认分 24 栏，通过 span 属性设置列宽：

<el-row>
  <el-col :span="12">占 12 栏</el-col>
  <el-col :span="6">占 6 栏</el-col>
</el-row>

栅格属性

1. span
   控制列宽（1-24），如 :span="8" 表示占 1/3 宽度。

2. offset
   设置左侧偏移栏数，如 :offset="4" 向右偏移 4 栏。

   

3. push/pull
   通过 push 右移或 pull 左移列，不影响其他列位置。

响应式布局

支持断点属性，适应不同屏幕尺寸：

• xs：<768px
• sm：≥768px
• md：≥992px
• lg：≥1200px
• xl：≥1920px

示例：

<el-col :xs="24" :sm="12" :md="8">响应式列</el-col>

布局模式

1. Flex 布局
   通过 type="flex" 启用 Flex 模式，配合 justify 和 align 设置对齐方式：

   <el-row type="flex" justify="center" align="middle">
     <el-col :span="6">居中对齐</el-col>
   </el-row>

2. 间距设置
   使用 gutter 属性定义列间距（单位 px）：

   <el-row :gutter="20">
     <el-col :span="6"><div style="padding: 10px;">内容</div></el-col>
   </el-row>

注意事项

• 栅格系统总宽度为 24 栏，超出会自动换行。
• 嵌套栅格时，内层 el-row 需重新定义 gutter。
• Flex 模式下可通过 flex 属性分配剩余空间。