elementui col

ElementUI 的 Col 组件

ElementUI 的 el-col 是布局组件 el-row 的配套列组件，用于实现基于 24 分栏的栅格布局系统。

基本用法

el-col 需要嵌套在 el-row 内使用，并通过 span 属性指定占据的栏数（最大 24）：

<el-row>
  <el-col :span="12">占据 12 栏（50%）</el-col>
  <el-col :span="6">占据 6 栏（25%）</el-col>
  <el-col :span="6">占据 6 栏（25%）</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>

• xs：屏幕宽度 < 768px
• sm：屏幕宽度 ≥ 768px
• md：屏幕宽度 ≥ 992px
• lg：屏幕宽度 ≥ 1200px
• xl：屏幕宽度 ≥ 1920px

偏移与对齐

• 偏移：通过 offset 属性设置左侧偏移栏数。

  

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

• 对齐：通过 el-row 的 justify 和 align 属性调整列的水平与垂直对齐方式。

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

嵌套栅格

el-col 内可继续嵌套 el-row 实现复杂布局：

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

注意事项

• 默认栅格间距为 0，可通过 el-row 的 gutter 属性调整（单位：px）。
• 组件基于 Flex 布局，需确保浏览器兼容性。

通过灵活组合 span、offset 和响应式属性，可快速构建适应不同设备的页面布局。