Layout 布局
通过基础的 24 分栏，迅速简便地创建布局。
提示
该组件默认使用 flex 布局，无需手动设置 type="flex"。
请注意，父容器应避免使用 inline 相关样式，否则会导致组件无法撑满宽度。
栏位的基本单位是 1，最大值为 24，最小值为 0。
基础布局
使用列创建基础网格布局。
通过 row 和 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- 仅在超小屏幕下隐藏hidden-sm-only- 仅在小屏幕下隐藏hidden-sm-and-down- 在小屏幕以及更小尺寸下隐藏hidden-sm-and-up- 在小屏幕以及更大尺寸下隐藏hidden-md-only- 仅在中等屏幕下隐藏hidden-md-and-down- 在中等屏幕以及更小尺寸下隐藏hidden-md-and-up- 在中等屏幕以及更大尺寸下隐藏hidden-lg-only- 仅在大屏幕下隐藏hidden-lg-and-down- 在大屏幕以及更小尺寸下隐藏hidden-lg-and-up- 在大屏幕以及更大尺寸下隐藏hidden-xl-only- 仅在超大屏幕下隐藏
Row 属性
Row 属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| gutter | 栅格间隔 | number | 0 |
| justify | flex 布局下的水平排列方式 | 枚举 | align |
| align | flex 布局下的垂直排列方式 | 枚举 | — |
| tag | 自定义元素标签 | string | div |
Row 插槽
| 名称 | 描述 | 子标签 |
|---|---|---|
| default | 自定义默认内容 | Col |
Col 属性
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 | 自定义默认内容 |