elementui flex

ElementUI Flex 布局使用指南

ElementUI 是基于 Vue.js 的组件库，提供了 el-row 和 el-col 组件来实现灵活的 Flex 布局。以下是具体使用方法：

基本布局结构

使用 el-row 创建行容器，el-col 创建列容器。默认情况下，el-row 采用 Flex 布局，子元素 el-col 会自动平均分配宽度。

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

响应式布局

通过设置不同的断点属性（xs, sm, md, lg, xl）实现响应式布局。

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

对齐方式

利用 type="flex" 和 justify、align 属性控制对齐方式。

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

间隔设置

通过 gutter 属性设置列间距（单位 px），支持响应式。

<el-row :gutter="20">
  <el-col :span="6"><div style="background:#eee">列1</div></el-col>
  <el-col :span="6"><div style="background:#ddd">列2</div></el-col>
</el-row>

嵌套布局

el-col 内可嵌套新的 el-row 实现复杂布局。

<el-row>
  <el-col :span="12">
    <el-row>
      <el-col :span="6">嵌套列1</el-col>
    </el-row>
  </el-col>
</el-row>

偏移列

使用 offset 属性设置列偏移量（基于 24 列标准）。

<el-row>
  <el-col :span="6" :offset="6">偏移6列</el-col>
</el-row>

自定义 Flex 属性

通过 CSS 类名覆盖原生 Flex 样式：

.custom-flex {
  display: flex;
  flex-direction: column;
}

<el-row class="custom-flex">
  <el-col>自定义Flex方向</el-col>
</el-row>

注意事项

• 总列数不超过 24，否则会自动换行
• 建议在 el-col 内添加 div 作为内容容器
• 响应式断点值对应不同屏幕尺寸（xs <768px, sm ≥768px 等）