介绍
Layout 提供了 `van-row` 和 `van-col` 两个组件来进行行列布局。
引入
代码演示
基础用法
Layout 组件提供了 `24列栅格`，通过在 `Col` 上添加 `span` 属性设置列所占的宽度百分比。此外，添加 `offset` 属性可以设置列的偏移宽度，计算方式与 span 相同。
设置列元素间距
通过 `gutter` 属性可以设置列元素之间的间距，默认间距为 0。
Flex 布局
将 `type` 属性设置为 flex 可以启用 flex 布局，便于进行灵活的对齐。
API
Row Props
| 参数 | 说明 | 类型 | 默认值 | |
|---|---|---|---|---|
| type | 布局方式，可选值为flex | string | - | |
| gutter | 列元素之间的间距（单位为 px） | number、string | - | |
| tag | 自定义元素标签 | string | div | |
| justify | Flex 主轴对齐方式，可选值为 end centerspace-around space-between | string | start | |
| align | Flex 交叉轴对齐方式，可选值为 center bottom | string | top |
Col Props
| 参数 | 说明 | 类型 | 默认值 | |
|---|---|---|---|---|
| span | 列元素宽度 | number、string | - | |
| offset | 列元素偏移距离 | number、string | - | |
| tag | 自定义元素标签 | string | div |
Row Events
| 事件名 | 说明 | 回调参数 | |
|---|---|---|---|
| click | 点击时触发 | event: Event |
Col Events
| 事件名 | 说明 | 回调参数 | |
|---|---|---|---|
| click | 点击时触发 | event: Event |
效果图：
