Vant Layout 布局
Layout 提供了van-row和van-col两个组件来进行行列布局
引入import Vue from 'vue';
import { Col, Row } from 'vant';
Vue.use(Col);
Vue.use(Row);
基本用法
Layout 组件提供了24列栅格,通过在Col上添加span属性设置列所占的宽度百分比此外,添加offset属性可以设置列的偏移宽度,计算方式与 span 相同
span: 8
span: 8
span: 8
span: 4
offset: 4, span: 10
offset: 12, span: 12
设置列元素间距
通过gutter属性可以设置列元素之间的间距,默认间距为 0
span: 8
span: 8
span: 8
Flex 布局
将 type 属性设置为 flex 可以启用 flex 布局,便于进行灵活的对齐
span: 6
span: 6
span: 6
span: 6
span: 6
span: 6
span: 6
span: 6
span: 6
span: 6
span: 6
span: 6
span: 6
span: 6
span: 6
API
Row Props参数说明类型默认值type布局方式,可选值为flexstrin