May 07, 2021 Vant
Layout provides van-row and van-col components for row layout
import Vue from 'vue';
import { Col, Row } from 'vant';
Vue.use(Col);
Vue.use(Row);
The Layout component provides 24 columns of rasters, which are calculated in the same way as span by adding span properties to the Color to set the percentage of width of the column, in addition to adding the offset property to set the offset width of the column
<van-row>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
</van-row>
<van-row>
<van-col span="4">span: 4</van-col>
<van-col span="10" offset="4">offset: 4, span: 10</van-col>
</van-row>
<van-row>
<van-col offset="12" span="12">offset: 12, span: 12</van-col>
</van-row>
The gutter property allows you to set the spacing between column elements, with a default spacing of 0
<van-row gutter="20">
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
</van-row>
Setting the type property to flex enables flex layout for flexible alignment
<!-- 左对齐 -->
<van-row type="flex">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<!-- 居中 -->
<van-row type="flex" justify="center">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<!-- 右对齐 -->
<van-row type="flex" justify="end">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<!-- 两端对齐 -->
<van-row type="flex" justify="space-between">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<!-- 每个元素的两侧间隔相等 -->
<van-row type="flex" justify="space-around">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
| Parameters | Description | Type | The default |
|---|---|---|---|
| type |
Layout, with an optional value
flex
|
string | - |
| gutter | Spacing between column elements in px | number | string | - |
| tag | Custom element labels | string |
div
|
| justify |
Flex spindle alignment, with an optional value of
end
center
space-around
space-between
|
string |
start
|
| align |
Flex cross-axis alignment, with an optional value of
center
bottom
|
string |
top
|
| Parameters | Description | Type | The default |
|---|---|---|---|
| span | The width of the column element | number | string | - |
| offset | The offset distance of the column elements | number | string | - |
| tag | Custom element labels | string |
div
|
| The name of the event | Description | Callback parameters |
|---|---|---|
| Click | Triggered when clicked | event: Event |
| The name of the event | Description | Callback parameters |
|---|---|---|
| Click | Triggered when clicked | event: Event |