/*! For license information please see 650.c493a0de.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["650"],{57320:function(s,a,n){"use strict";n.r(a);var l=n("80681");let t=["innerHTML"];a.default={setup:()=>({html:""}),render:()=>((0,l.wg)(),(0,l.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

Layout \u5E03\u5C40

\n

\u4ECB\u7ECD

\n

Layout \u63D0\u4F9B\u4E86 van-row \u548C van-col \u4E24\u4E2A\u7EC4\u4EF6\u6765\u8FDB\u884C\u884C\u5217\u5E03\u5C40\u3002

\n

\u5F15\u5165

\n

\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002

\n
import { createApp } from 'vue';\nimport { Col, Row } from 'vant';\n\nconst app = createApp();\napp.use(Col);\napp.use(Row);\n
\n

\u4EE3\u7801\u6F14\u793A

\n

\u57FA\u7840\u7528\u6CD5

\n

Layout \u7EC4\u4EF6\u63D0\u4F9B\u4E86 24\u5217\u6805\u683C\uFF0C\u901A\u8FC7\u5728 Col \u4E0A\u6DFB\u52A0 span \u5C5E\u6027\u8BBE\u7F6E\u5217\u6240\u5360\u7684\u5BBD\u5EA6\u767E\u5206\u6BD4\u3002\u6B64\u5916\uFF0C\u6DFB\u52A0 offset \u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u5217\u7684\u504F\u79FB\u5BBD\u5EA6\uFF0C\u8BA1\u7B97\u65B9\u5F0F\u4E0E span \u76F8\u540C\u3002

\n
<van-row>\n  <van-col span="8">span: 8</van-col>\n  <van-col span="8">span: 8</van-col>\n  <van-col span="8">span: 8</van-col>\n</van-row>\n\n<van-row>\n  <van-col span="4">span: 4</van-col>\n  <van-col span="10" offset="4">offset: 4, span: 10</van-col>\n</van-row>\n\n<van-row>\n  <van-col offset="12" span="12">offset: 12, span: 12</van-col>\n</van-row>\n
\n

\u8BBE\u7F6E\u5217\u5143\u7D20\u95F4\u8DDD

\n

\u901A\u8FC7 gutter \u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u5217\u5143\u7D20\u4E4B\u95F4\u7684\u95F4\u8DDD\uFF0C\u9ED8\u8BA4\u95F4\u8DDD\u4E3A 0\u3002

\n
<van-row gutter="20">\n  <van-col span="8">span: 8</van-col>\n  <van-col span="8">span: 8</van-col>\n  <van-col span="8">span: 8</van-col>\n</van-row>\n
\n

\u5782\u76F4\u95F4\u8DDD

\n

\u5982\u679C\u9700\u8981\u8BBE\u7F6E\u5782\u76F4\u95F4\u8DDD\uFF0C\u53EF\u4EE5\u4F7F\u7528\u6570\u7EC4\u5F62\u5F0F\u8BBE\u7F6E [\u6C34\u5E73\u95F4\u8DDD, \u5782\u76F4\u95F4\u8DDD]\u3002

\n
<!-- \u8BBE\u7F6E\u5782\u76F4\u95F4\u8DDD -->\n<van-row :gutter="[20, 20]">\n  <van-col span="12">span: 12</van-col>\n  <van-col span="12">span: 12</van-col>\n  <van-col span="12">span: 12</van-col>\n  <van-col span="12">span: 12</van-col>\n</van-row>\n
\n

\u5BF9\u9F50\u65B9\u5F0F

\n

\u901A\u8FC7 justify \u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u4E3B\u8F74\u4E0A\u5185\u5BB9\u7684\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u7B49\u4EF7\u4E8E flex \u5E03\u5C40\u4E2D\u7684 justify-content \u5C5E\u6027\u3002

\n
<!-- \u5C45\u4E2D -->\n<van-row justify="center">\n  <van-col span="6">span: 6</van-col>\n  <van-col span="6">span: 6</van-col>\n  <van-col span="6">span: 6</van-col>\n</van-row>\n\n<!-- \u53F3\u5BF9\u9F50 -->\n<van-row justify="end">\n  <van-col span="6">span: 6</van-col>\n  <van-col span="6">span: 6</van-col>\n  <van-col span="6">span: 6</van-col>\n</van-row>\n\n<!-- \u4E24\u7AEF\u5BF9\u9F50 -->\n<van-row justify="space-between">\n  <van-col span="6">span: 6</van-col>\n  <van-col span="6">span: 6</van-col>\n  <van-col span="6">span: 6</van-col>\n</van-row>\n\n<!-- \u6BCF\u4E2A\u5143\u7D20\u7684\u4E24\u4FA7\u95F4\u9694\u76F8\u7B49 -->\n<van-row justify="space-around">\n  <van-col span="6">span: 6</van-col>\n  <van-col span="6">span: 6</van-col>\n  <van-col span="6">span: 6</van-col>\n</van-row>\n
\n

API

\n

Row Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
gutter\u5217\u5143\u7D20\u4E4B\u95F4\u7684\u95F4\u8DDD\uFF08\u5355\u4F4D\u4E3A px\uFF09number | string | Array-
tag\u81EA\u5B9A\u4E49\u5143\u7D20\u6807\u7B7Estringdiv
justify\u4E3B\u8F74\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A end center
space-around space-between		stringstart
align\u4EA4\u53C9\u8F74\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center bottomstringtop
wrap\u662F\u5426\u81EA\u52A8\u6362\u884Cbooleantrue
\n

Col Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
span\u5217\u5143\u7D20\u5BBD\u5EA6number | string-
offset\u5217\u5143\u7D20\u504F\u79FB\u8DDD\u79BBnumber | string-
tag\u81EA\u5B9A\u4E49\u5143\u7D20\u6807\u7B7Estringdiv
\n

Row Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
click\u70B9\u51FB\u65F6\u89E6\u53D1event: MouseEvent
\n

Col Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
click\u70B9\u51FB\u65F6\u89E6\u53D1event: MouseEvent
\n

\u7C7B\u578B\u5B9A\u4E49

\n

\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A

\n
import type { ColProps, RowProps, RowAlign, RowJustify } from 'vant';\n
\n
'},null,8,t))}}}]);