elementui flex

以下是关于 Element UI 中 Flex 布局的详细说明和使用方法：

Flex 布局基础

Element UI 的 Flex 布局基于 CSS Flexbox 模型，通过 el-row 和 el-col 组件实现响应式栅格系统。el-row 作为容器，el-col 作为子项，默认采用 flex-wrap: wrap 实现自动换行。

基本结构

<el-row>
  <el-col :span="8">内容1</el-col>
  <el-col :span="8">内容2</el-col>
  <el-col :span="8">内容3</el-col>
</el-row>

常用属性

el-row 属性：

• gutter：栅格间隔（单位px），如 :gutter="20"
• type：设置为 flex 可启用弹性布局
• justify：主轴对齐方式（start/end/center/space-around/space-between）
• align：交叉轴对齐方式（top/middle/bottom）

el-col 属性：

• span：栅格占据的列数（范围1-24）
• offset：栅格左侧的间隔格数
• push/pull：栅格排序（数值调整位置）

响应式布局

支持多端断点配置：

<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
  响应式内容
</el-col>

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

对齐方式示例

<el-row type="flex" justify="space-between" align="middle">
  <el-col :span="6">左对齐</el-col>
  <el-col :span="6">垂直居中</el-col>
</el-row>

嵌套栅格

支持多层嵌套实现复杂布局：

<el-row>
  <el-col :span="12">
    <el-row>
      <el-col :span="12">嵌套内容</el-col>
    </el-row>
  </el-col>
</el-row>

自定义间隔

通过 gutter 实现精确控制：

<el-row :gutter="32">
  <el-col :span="8">间距32px</el-col>
</el-row>

以上方法结合使用可满足大多数响应式布局需求，实际开发时建议根据设计稿的断点要求调整参数。