import{o as a,a as n,y as t}from"./vue-libs.b44bc779.js";const l={class:"van-doc-markdown-body"},p=t(`

Layout \u5E03\u5C40

\u4ECB\u7ECD

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

\u5F15\u5165

\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

import { createApp } from 'vue';
import { Col, Row } from 'vant';

const app = createApp();
app.use(Col);
app.use(Row);

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

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

<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>

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

\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

<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>

\u5BF9\u9F50\u65B9\u5F0F

\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

<!-- \u5C45\u4E2D -->
<van-row 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>

<!-- \u53F3\u5BF9\u9F50 -->
<van-row 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>

<!-- \u4E24\u7AEF\u5BF9\u9F50 -->
<van-row 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>

<!-- \u6BCF\u4E2A\u5143\u7D20\u7684\u4E24\u4FA7\u95F4\u9694\u76F8\u7B49 -->
<van-row 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>

API

Row Props

\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-
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 v3.0.11\u662F\u5426\u81EA\u52A8\u6362\u884Cbooleantrue

Col Props

\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

Row Events

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

Col Events

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

\u7C7B\u578B\u5B9A\u4E49

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

import type { ColProps, RowProps, RowAlign, RowJustify } from 'vant';
`,13),c=[p],r={__name:"README.zh-CN",setup(e,{expose:s}){return s({frontmatter:{}}),(o,d)=>(a(),n("div",l,c))}};export{r as default};