Layout 布局
通过基础的 24 分栏，迅速简便地创建布局。
提示
该组件默认使用 flex 布局，无需手动设置 type="flex"。
请注意，父容器应避免使用 inline 相关样式，因为这会导致该组件无法撑满其父容器宽度。
列的最小单位为 1，最大为 24，最小为 0。
基础布局
使用列创建基本网格布局。
通过 row 和 col 组件，并通过 col 组件的 span 属性，我们就可以自由地组合布局。
分栏间隔
支持列间距。
Row 组件的 gutter 属性可以设置列与列之间的间隔，默认为 0。
混合布局
通过基础的 1/24 分栏任意扩展组合，形成更为复杂的混合布局。
分栏偏移
你可以指定列偏移量。
通过设置 Col 组件的 offset 属性可以指定分栏偏移的栏数。
对齐方式
默认使用 flex 布局来对分栏进行灵活的对齐。
您可以通过 justify 属性来定义子元素的排版方式，其取值为 start、center、end、space-between、space-around 或 space-evenly。
响应式布局
参照了 Bootstrap 的响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。
用于隐藏元素的类
此外，Element Plus 提供了一系列类名，用于在某些条件下隐藏元素。 这些类名可以添加到任何 DOM 元素或自定义组件上。 为了使用这些类名，你需要导入下面的 CSS 文件：
js
import 'element-plus/theme-chalk/display.css'这些类是：
hidden-xs-only- 只在 xs 尺寸的屏幕上隐藏hidden-sm-only- 只在 sm 尺寸的屏幕上隐藏hidden-sm-and-down- 在 sm 及以下尺寸的屏幕上隐藏hidden-sm-and-up- 在 sm 及以上尺寸的屏幕上隐藏hidden-md-only- 只在 md 尺寸的屏幕上隐藏hidden-md-and-down- 在 md 及以下尺寸的屏幕上隐藏hidden-md-and-up- 在 md 及以上尺寸的屏幕上隐藏hidden-lg-only- 只在 lg 尺寸的屏幕上隐藏hidden-lg-and-down- 在 lg 及以下尺寸的屏幕上隐藏hidden-lg-and-up- 在 lg 及以上尺寸的屏幕上隐藏hidden-xl-only- 只在 xl 尺寸的屏幕上隐藏
Row API
Row 属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| gutter | 栅格间隔 | number | 0 |
| justify | flex 布局下的水平排列方式 | 枚举 | start |
| align | flex 布局下的垂直排列方式 | 枚举 | — |
| tag | 自定义元素标签 | string | div |
Row 插槽
| 名称 | 描述 | 子标签 |
|---|---|---|
| default | 自定义默认内容 | Col |
Col API
Col 属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| span | 栅格占据的列数 | number | 24 |
| offset | 栅格左侧的间隔格数 | number | 0 |
| push | 栅格向右移动格数 | number | 0 |
| pull | 栅格向左移动格数 | number | 0 |
| xs | <768px 响应式栅格数或者栅格属性对象 | number / object | — |
| sm | ≥768px 响应式栅格数或者栅格属性对象 | number / object | — |
| md | ≥992px 响应式栅格数或者栅格属性对象 | number / object | — |
| lg | ≥1200px 响应式栅格数或者栅格属性对象 | number / object | — |
| xl | ≥1920px 响应式栅格数或者栅格属性对象 | number / object | — |
| tag | 自定义元素标签 | string | div |
Col 插槽
| 名称 | 描述 |
|---|---|
| default | 自定义默认内容 |