当前位置：首页 > 前端教程

elementui layout

2026-03-06 05:40:14前端教程

ElementUI Layout 布局系统

ElementUI 提供了一套基于 flex 的布局系统，通过 el-row 和 el-col 组件实现灵活的栅格布局。以下是核心功能和使用方法：

基础栅格布局

通过 el-row 创建行，el-col 创建列，使用 span 属性指定列宽（共24等分）：

<el-row>
  <el-col :span="12">占50%宽度</el-col>
  <el-col :span="6">占25%宽度</el-col>
  <el-col :span="6">占25%宽度</el-col>
</el-row>

栅格间隔

通过 gutter 属性设置列间距（单位px）：

<el-row :gutter="20">
  <el-col :span="8">列1</el-col>
  <el-col :span="8">列2</el-col>
  <el-col :span="8">列3</el-col>
</el-row>

响应式布局

支持五种响应尺寸，适应不同屏幕：

<el-col 
  :xs="24" :sm="12" 
  :md="8" :lg="6" :xl="4">
  根据屏幕宽度自动调整
</el-col>

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

对齐方式

通过 type="flex" 启用弹性布局，配合 justify 和 align 控制对齐：

<el-row type="flex" justify="center" align="middle">
  <el-col :span="6">水平垂直居中</el-col>
</el-row>

可选值：

justify: start/end/center/space-around/space-between
align: top/middle/bottom

列偏移

使用 offset 属性设置列左侧偏移量：

<el-col :span="6" :offset="6">向右偏移25%</el-col>

嵌套栅格

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

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

注意事项

每行总 span 建议不超过24
响应式属性会覆盖默认 span
嵌套过深可能影响性能
在 SSR 环境中需注意 el-col 的客户端渲染特性

通过组合这些功能，可以快速构建适应各种屏幕的响应式页面结构。

elementui layout

标签: elementui layout

分享给朋友：

elementui视频

以下是关于 ElementUI 视频资源的整理，涵盖教程、实战案例和官方资源： ElementUI 官方视频资源 ElementUI 官方文档虽以文字为主，但部分社区或第三方平台可能有官方团队发布的…

修改elementui的样式

修改 ElementUI 样式的方法通过全局样式覆盖在项目的全局样式文件（如 App.vue 或 main.css）中直接覆盖 ElementUI 的默认样式。需确保选择器优先级高于默认样式，可通…

elementui锁屏

ElementUI 锁屏功能实现 ElementUI 本身并未直接提供锁屏组件，但可以通过遮罩层、自定义指令或结合 Vue 路由守卫实现类似效果。以下是几种常见实现方式：使用遮罩层与自定义指令通…

yarn elementui

安装 Element UI 与 Yarn Element UI 是一个基于 Vue.js 的组件库，使用 Yarn 作为包管理工具可以快速安装和集成。以下是具体方法：确保已安装 Yarn 和 V…

elementui filter

ElementUI 过滤器（Filter）使用指南 ElementUI 是一套基于 Vue.js 的组件库，常用于快速构建前端界面。过滤器（Filter）在 ElementUI 中主要用于表格（Tab…

elementui配色

Element UI 配色方案 Element UI 提供了一套基于 Vue.js 的默认配色方案，主要用于组件库的视觉设计。以下是其核心配色及自定义方法：默认主题色主色调：#409EFF（蓝…

elementui layout