Vant Space 间距组件：5 个 Props 搞定元素间距，还能分别设置横向纵向间距

Vant Space 间距组件5 个 Props 搞定元素间距还能分别设置横向纵向间距【免费下载链接】vantA lightweight, customizable Vue UI library for mobile web apps.项目地址: https://gitcode.com/GitHub_Trending/va/vant在 Vant 中van-space是专门负责元素之间间距的布局组件把子元素包进van-space组件会自动在每个子元素之间注入统一间距横向、纵向、换行行距都可以单独控制不需要你再给子元素手工补 margin。快速接入安装并渲染第一个 van-space先安装 Vant 并注册组件然后把子元素直接放进van-spaceimport { createApp } from vue; import { Space } from vant; const app createApp(); app.use(Space);van-space van-button typeprimary按钮/van-button van-button typeprimary按钮/van-button van-button typeprimary按钮/van-button /van-space不传任何属性时子元素之间会自动出现8px 的横向间距默认值来自packages/vant/src/space/Space.tsx中size的default: 8。除全局注册外也可以按需import { Space } from vant后在组件里局部注册用法一致。横向按钮组默认行为就够了问题一行按钮要拉开间距又不想在每个按钮上写margin-right。代码就是上面的基础用法什么都不用传。组件会为每个子元素包一层.van-space-item用内联样式注入margin-right: 8px末项不注入所以按钮组两端不会多出空白。关键点间距是加在包裹层上的不会污染子组件自身样式子元素高度不一致时默认按align-items: center垂直居中见下文对齐一节。纵向通栏列表directionvertical 搭配 fill 和 block问题按钮、卡片需要纵向排成一列并占满整行宽度。van-space directionvertical fill van-button typeprimary block按钮/van-button van-button typeprimary block按钮/van-button van-button typeprimary block按钮/van-button /van-space三个属性缺一不可地配合directionvertical容器切换为flex-direction: column间距从margin-right换成margin-bottomfillSpace 默认是display: inline-flex宽度由内容撑开加上fill后变成display: flex块级容器才能撑满父元素子元素加blockButton 默认是自适应宽度通栏效果需要子元素自己撑满。如何分别设置横向纵向间距size 的三种写法size支持三种形态对应三种诉求!-- 数字自动补 px -- van-space :size20.../van-space !-- 字符串自带单位原样使用 -- van-space size2rem.../van-space !-- 数组[横向间距, 纵向间距]配合 wrap 分别控制列距和行距 -- van-space wrap :size[12, 20].../van-space数组形态是size最实用的隐藏能力size[0]决定margin-rightsize[1]决定margin-bottom。在wrap模式下每个子项都会同时携带横向与纵向两个 margin正好对应列距和行距两个概念。字符串类型请带单位如20px、2em、5vw组件不会替你补。对齐方式align 的四种取值与默认行为问题按钮和高块元素并排时垂直方向怎么对齐。van-space alignstart stylepadding: 16px; background: #f3f2f5 van-button typeprimary按钮/van-button div stylepadding: 40px 20px; background: #fffBlock/div /van-spacealign可选start、center、end、baseline映射为align-items: flex-start / center / flex-end / baseline。注意默认值取决于方向水平模式不传align时默认按center处理垂直模式不传则不加对齐类纵向排列中align-items影响不大。所以align主要服务于水平模式。自动换行wrap 之后行距从哪来问题子元素多、一行放不下时折行后第二行会紧贴第一行没有行距。van-space wrap :size[12, 16] !-- 大量子元素一行放不下时自动折行 -- /van-space开启wrap后容器加上flex-wrap: wrap。行距的保证方式是开启wrap后所有子项包括最后一项都会注入margin-bottom这样每一行的高度天然包含行距折行后第二行不会贴住第一行。横向间距仍由margin-right提供只是换到新一行时该行不再受上一行末项的margin-right影响——这正是size数组形态存在的原因。API 速查Props参数说明类型默认值direction间距方向vertical | horizontalhorizontalsize间距大小如20px、2em数字默认补px单位数组形式[横向间距, 纵向间距]number | string | [number | string, number | string]8align子元素对齐方式start | end | center | baseline水平模式center垂直模式无wrap是否自动换行仅水平方向有效booleanfalsefill是否变为块级元素填充整个父元素宽度booleanfalseSlots名称说明default间距组件内容类型定义import type { SpaceProps, SpaceSize, SpaceAlign } from vant;推荐组合纵向通栏用directionvertical fill 子元素 block标签墙、筛选按钮组用wrap size 数组纯横向小组合直接裸用即可。wrap只对水平方向有意义垂直模式下没有换行概念。内部实现间距到底是怎么注入的Space 的全部逻辑集中在 packages/vant/src/space/Space.tsx样式在 packages/vant/src/space/index.less四个实现点决定了它的行为边界间距是内联 margin不是 CSS 变量。渲染时每个子元素被包进.van-space-item由getMarginStyle计算内联样式水平方向写margin-right垂直方向或开启wrap时写margin-bottom。因此子项数量变化、动态渲染都能即时生效不依赖兄弟选择器。最后一项特殊处理。getMarginStyle(isLast)对末项默认返回空样式避免行尾/列尾出现多余空白唯独wrap模式下末项保留margin-bottom否则最后一行高度缺行距下一行会贴上来。空节点过滤。filterEmpty递归展开 Fragment剔除注释节点、空 Fragment 和纯空白文本节点。没有这一步van-spaceA /B //van-space中换行产生的文本节点会占据一个间距位导致间距数量与子元素数量对不上。类名走 BEM 规则。createNamespace(space)生成的bem把direction、align、wrap、fill映射为van-space--vertical、van-space--align-center、van-space--wrap、van-space--fill等类名align缺省时由mergedAlign计算属性回退为水平模式的center。单元测试packages/vant/src/space/test/index.spec.tsx覆盖了默认 8px 右间距、末项无间距、垂直排列类名与下间距、自定义20px、align与wrap类名等核心行为demo.spec.ts则以快照方式锁定演示页渲染结果。避坑与最佳实践fill与inline-flex的宽度差异不开fill时 Space 是行内 Flex宽度由内容决定垂直模式下的子元素不会撑满父容器需要通栏必须fill和子元素block同时给。size传字符串要带单位数字才会自动补pxsize2rem原样生效size20会变成非法值20。wrap模式下末项也有margin-bottom这是刻意行为保证行距一致如果容器本身又加了padding-bottom注意叠加后的底部空隙。align只对水平模式有明显意义垂直模式下align-items作用在纵向轴上通常无需设置。TS 项目用SpaceProps标注 props 对象SpaceSize、SpaceAlign可用于局部类型收窄均从vant包根路径导入。间距场景优先用van-space而不是手工 margin间距语义集中在一处增删子元素时布局不会错位横纵、换行这些边界情况也已由组件内部处理完毕。【免费下载链接】vantA lightweight, customizable Vue UI library for mobile web apps.项目地址: https://gitcode.com/GitHub_Trending/va/vant创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考