amis-ui 的 space-between 工具类用 space-x / space-y 一行类名搞定子元素间距【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amisamis前端低代码框架的组件库 amis-ui 在packages/amis-ui/scss/helper/spacing目录下内置了一套名为Space Between的 SCSS 工具类helper class只需给容器加上space-x-4或space-y-2之类的类名即可为容器内相邻子元素之间自动插入水平或垂直间距而不会给首尾元素添加多余的 margin。阅读完本文你将掌握 space-x / space-y 全量类名与取值对照、space-x-reverse/space-y-reverse反向模式、响应式设备前缀m:/pc:的用法以及它们基于$spacing间距刻度、借助相邻兄弟选择器实现的底层原理从而在 amis 页面或独立样式工程中快速、规范地完成列表、表单、按钮组等场景的等距布局。一、Space Between 是什么、解决什么问题在 Web 布局中让一组子元素两两之间保持固定间距是非常高频的需求。常见做法是给每个子元素设置margin-right或margin-top但这样会让最后一个元素也带上多余的边距往往需要再写:last-child { margin: 0 }之类的兜底规则如果子元素数量动态变化还要反复处理。amis-ui 的 Space Between 工具类换了一种思路把间距规则定义在父容器上通过 CSS 相邻兄弟选择器只对第二个及以后的子元素生效从而保证相邻元素之间间距恒定首元素之前、尾元素之后都不会产生多余间距容器自身不参与间距计算布局更可预测。对应文档位于 packages/amis-ui/scss/helper/spacing/_space-between.md它与同目录下的 Margin 工具类、Padding 工具类 一起构成了 amis-ui 完整的 spacing 辅助体系。二、类名速查表全量取值对照文档中以表格形式给出了全部类名与对应 CSS 属性。这里将原文档的普通类 反向类两行合并为一张四列表格方便整体查阅信息与原文档一一对应无删减。2.1 水平间距 space-xspace-x-*作用于水平方向默认给非首个子元素设置margin-left同时叠加.space-x-reverse时改为设置margin-right。ClassPropertiesReverse Class叠加使用Reverse Propertiesspace-x-pxmargin-left: 0.0625remspace-x-px.space-x-reversemargin-right: 0.0625remspace-x-0margin-left: 0space-x-0.space-x-reversemargin-right: 0space-x-nonemargin-left: 0space-x-none.space-x-reversemargin-right: 0space-x-0.5margin-left: 0.125remspace-x-0.5.space-x-reversemargin-right: 0.125remspace-x-1margin-left: 0.25remspace-x-1.space-x-reversemargin-right: 0.25remspace-x-1.5margin-left: 0.375remspace-x-1.5.space-x-reversemargin-right: 0.375remspace-x-2margin-left: 0.5remspace-x-2.space-x-reversemargin-right: 0.5remspace-x-2.5margin-left: 0.625remspace-x-2.5.space-x-reversemargin-right: 0.625remspace-x-3margin-left: 0.75remspace-x-3.space-x-reversemargin-right: 0.75remspace-x-3.5margin-left: 0.875remspace-x-3.5.space-x-reversemargin-right: 0.875remspace-x-4margin-left: 1remspace-x-4.space-x-reversemargin-right: 1remspace-x-5margin-left: 1.25remspace-x-5.space-x-reversemargin-right: 1.25remspace-x-6margin-left: 1.5remspace-x-6.space-x-reversemargin-right: 1.5remspace-x-7margin-left: 1.75remspace-x-7.space-x-reversemargin-right: 1.75remspace-x-8margin-left: 2remspace-x-8.space-x-reversemargin-right: 2remspace-x-9margin-left: 2.25remspace-x-9.space-x-reversemargin-right: 2.25remspace-x-10margin-left: 2.5remspace-x-10.space-x-reversemargin-right: 2.5remspace-x-11margin-left: 2.75remspace-x-11.space-x-reversemargin-right: 2.75remspace-x-12margin-left: 3remspace-x-12.space-x-reversemargin-right: 3remspace-x-14margin-left: 3.5remspace-x-14.space-x-reversemargin-right: 3.5remspace-x-16margin-left: 4remspace-x-16.space-x-reversemargin-right: 4remspace-x-18margin-left: 4.5remspace-x-18.space-x-reversemargin-right: 4.5remspace-x-20margin-left: 5remspace-x-20.space-x-reversemargin-right: 5remspace-x-24margin-left: 6remspace-x-24.space-x-reversemargin-right: 6remspace-x-28margin-left: 7remspace-x-28.space-x-reversemargin-right: 7remspace-x-32margin-left: 8remspace-x-32.space-x-reversemargin-right: 8remspace-x-36margin-left: 9remspace-x-36.space-x-reversemargin-right: 9remspace-x-40margin-left: 10remspace-x-40.space-x-reversemargin-right: 10remspace-x-44margin-left: 11remspace-x-44.space-x-reversemargin-right: 11remspace-x-48margin-left: 12remspace-x-48.space-x-reversemargin-right: 12remspace-x-52margin-left: 13remspace-x-52.space-x-reversemargin-right: 13remspace-x-56margin-left: 14remspace-x-56.space-x-reversemargin-right: 14remspace-x-60margin-left: 15remspace-x-60.space-x-reversemargin-right: 15remspace-x-64margin-left: 16remspace-x-64.space-x-reversemargin-right: 16remspace-x-72margin-left: 18remspace-x-72.space-x-reversemargin-right: 18remspace-x-80margin-left: 20remspace-x-80.space-x-reversemargin-right: 20remspace-x-96margin-left: 24remspace-x-96.space-x-reversemargin-right: 24rem2.2 垂直间距 space-yspace-y-*作用于垂直方向默认给非首个子元素设置margin-top同时叠加.space-y-reverse时改为设置margin-bottom。ClassPropertiesReverse Class叠加使用Reverse Propertiesspace-y-pxmargin-top: 0.0625remspace-y-px.space-y-reversemargin-bottom: 0.0625remspace-y-0margin-top: 0space-y-0.space-y-reversemargin-bottom: 0space-y-nonemargin-top: 0space-y-none.space-y-reversemargin-bottom: 0space-y-0.5margin-top: 0.125remspace-y-0.5.space-y-reversemargin-bottom: 0.125remspace-y-1margin-top: 0.25remspace-y-1.space-y-reversemargin-bottom: 0.25remspace-y-1.5margin-top: 0.375remspace-y-1.5.space-y-reversemargin-bottom: 0.375remspace-y-2margin-top: 0.5remspace-y-2.space-y-reversemargin-bottom: 0.5remspace-y-2.5margin-top: 0.625remspace-y-2.5.space-y-reversemargin-bottom: 0.625remspace-y-3margin-top: 0.75remspace-y-3.space-y-reversemargin-bottom: 0.75remspace-y-3.5margin-top: 0.875remspace-y-3.5.space-y-reversemargin-bottom: 0.875remspace-y-4margin-top: 1remspace-y-4.space-y-reversemargin-bottom: 1remspace-y-5margin-top: 1.25remspace-y-5.space-y-reversemargin-bottom: 1.25remspace-y-6margin-top: 1.5remspace-y-6.space-y-reversemargin-bottom: 1.5remspace-y-7margin-top: 1.75remspace-y-7.space-y-reversemargin-bottom: 1.75remspace-y-8margin-top: 2remspace-y-8.space-y-reversemargin-bottom: 2remspace-y-9margin-top: 2.25remspace-y-9.space-y-reversemargin-bottom: 2.25remspace-y-10margin-top: 2.5remspace-y-10.space-y-reversemargin-bottom: 2.5remspace-y-11margin-top: 2.75remspace-y-11.space-y-reversemargin-bottom: 2.75remspace-y-12margin-top: 3remspace-y-12.space-y-reversemargin-bottom: 3remspace-y-14margin-top: 3.5remspace-y-14.space-y-reversemargin-bottom: 3.5remspace-y-16margin-top: 4remspace-y-16.space-y-reversemargin-bottom: 4remspace-y-18margin-top: 4.5remspace-y-18.space-y-reversemargin-bottom: 4.5remspace-y-20margin-top: 5remspace-y-20.space-y-reversemargin-bottom: 5remspace-y-24margin-top: 6remspace-y-24.space-y-reversemargin-bottom: 6remspace-y-28margin-top: 7remspace-y-28.space-y-reversemargin-bottom: 7remspace-y-32margin-top: 8remspace-y-32.space-y-reversemargin-bottom: 8remspace-y-36margin-top: 9remspace-y-36.space-y-reversemargin-bottom: 9remspace-y-40margin-top: 10remspace-y-40.space-y-reversemargin-bottom: 10remspace-y-44margin-top: 11remspace-y-44.space-y-reversemargin-bottom: 11remspace-y-48margin-top: 12remspace-y-48.space-y-reversemargin-bottom: 12remspace-y-52margin-top: 13remspace-y-52.space-y-reversemargin-bottom: 13remspace-y-56margin-top: 14remspace-y-56.space-y-reversemargin-bottom: 14remspace-y-60margin-top: 15remspace-y-60.space-y-reversemargin-bottom: 15remspace-y-64margin-top: 16remspace-y-64.space-y-reversemargin-bottom: 16remspace-y-72margin-top: 18remspace-y-72.space-y-reversemargin-bottom: 18remspace-y-80margin-top: 20remspace-y-80.space-y-reversemargin-bottom: 20remspace-y-96margin-top: 24remspace-y-96.space-y-reversemargin-bottom: 24rem三、快速上手三个典型用法示例3.1 水平等距排列如按钮组、标签组div classspace-x-2 button取消/button button确定/button button更多/button /divspace-x-2会让确定更多两个按钮分别获得margin-left: 0.5rem而取消左侧无间距按钮组整体两端贴合容器。3.2 垂直列表如表单字段、列表项div classspace-y-4 div classfield姓名/div div classfield年龄/div div classfield地址/div /divspace-y-4为第二个及之后的字段添加margin-top: 1rem形成均匀的纵向留白。3.3 反向模式从右往左 / 从下往上排布当使用flex-row-reverse或dirrtl这类反向布局时margin-left的语义会反过来此时叠加space-x-reverse可以保持视觉间距一致div classflex flex-row-reverse space-x-2 space-x-reverse spanA/span spanB/span spanC/span /div垂直方向同理配合flex-col-reverse时可使用space-y-reverse。四、底层原理相邻兄弟选择器 mixin 批量生成仅看类名表格还不足以理解这套体系为什么只对元素之间生效答案在 SCSS 实现 packages/amis-ui/scss/helper/spacing/_space-between.scss 中。4.1 核心选择器 :not([hidden]) ~ :not([hidden])space-x-spacing与space-y-spacing两个 mixin 内部的关键选择器是 :not([hidden]) ~ :not([hidden]) { margin-left: $value; }限定只作用于直接子元素不会渗透到深层节点:not([hidden])会跳过设置了hidden属性的元素因此隐藏项不会产生多余间距相邻兄弟组合器~配合:not([hidden])只命中前面有可见兄弟的元素即第二个及之后的可见子元素——这正好实现了首尾无间距、中间等距。4.2 反向模式由宿主类切换属性mixins 在同一个规则内还生成了反向变体.space-x-reverse :not([hidden]) ~ :not([hidden]) { margin-right: $value; }也就是说space-x-reverse是叠加在容器自身上的一个额外类不是子元素类它把margin-left切换为margin-rightspace-y-reverse同理把margin-top切换为margin-bottom。这与文档表格中space-x-1.space-x-reverse → margin-right: 0.25rem的对应关系完全一致。4.3make-spaces组合入口make-spacesmixin 一次性调用space-x-spacing和space-y-spacing随后在文件底部执行include make-spaces();所有类名由此批量生成无需手写几十条重复规则。五、间距刻度从哪来$spacing变量与px2rem类名中的数字0.5、1、2……96并不是硬编码的像素值而是来自 amis-ui 的全局间距变量表 packages/amis-ui/scss/_variables.scss$spacing: ( px: px2rem(1px), 0: 0, none: 0, 0.5: px2rem(2px), 1: px2rem(4px), ... 96: px2rem(384px) ) !default;两点值得注意刻度参考 tailwind源码注释明确标注下面是参考 tailwind因此熟悉 Tailwind 的开发者几乎可以零成本迁移所有值都经由px2rem()转换函数实现在 packages/amis-ui/scss/_functions.scssfunction px2rem($pixels, $context: $remFactor) { if (unitless($pixels)) { $pixels: $pixels * 1px; } if (unitless($context)) { $context: $context * 1px; } return math.div($pixels, $context) * 1rem; }它按$remFactor默认16px定义于 packages/amis-ui/scss/_variables.scss将像素值折算为rem例如px2rem(16px) 1rem。这意味着整套 space 类天然基于根字号自适应缩放而不是固定像素文档表格中space-x-1 → 0.25rem正是4px / 16px的结果。开发者可以在自己的工程里通过覆写$spacing变量来扩展或精简间距刻度。六、响应式前缀m:与pc:除了默认类源码末尾还为设备断点批量生成了带前缀的变体each $deivce in map-keys($devices) { include media-device($deivce) { include make-spaces(. selector-escape($deivce :)); } }$devices与media-devicemixin 分别定义在 packages/amis-ui/scss/_variables.scss 和 packages/amis-ui/scss/_mixins.scss$devices: ( m: (max-width: 768px), pc: (min-width: 769px) ) !default; mixin media-device($name, $devices: $devices) { $n: map-get($devices, $name); media #{$n} { content; } }因此除了基础类还同时生成了以下响应式版本每个取值都存在类名示例生效条件m:space-x-2视口宽度 ≤ 768px 时生效pc:space-x-2视口宽度 ≥ 769px 时生效m:space-y-4/pc:space-y-4同理作用于垂直方向典型场景是移动端与桌面端采用不同间距div classspace-y-2 m:space-y-4 pc:space-y-6即可实现小屏收紧、大屏放松的渐进式间距。七、与 margin / padding 工具类的关系Space Between 是 amis-ui spacing 体系的三大支柱之一三者定位互补工具类作用对象典型用途space-x / space-y容器 → 子元素之间的间距列表、按钮组、表单字段的等距排列Marginm-/mx-/my-/mt-…元素自身的四向外边距单个元素与外部元素的留白、m-auto居中Paddingp-/px-/py-…元素自身的四向内边距内容与边框之间的留白选择建议需要多个兄弟元素彼此等距时优先用 space 类只调整单个元素与周围的距离时用 margin 类需要撑大可点击区域或分隔内容与边框时用 padding 类。八、使用注意事项仅对直接子元素生效选择器带嵌套层级中的孙元素不会被影响hidden元素会被跳过:not([hidden])意味着用hidden属性隐藏的子项不会留下空洞间距space-x-reverse/space-y-reverse要加在容器上与space-x-*是同一元素上的两个类间距是 rem 值会随根字号变化若工程自定义了$remFactor对应 rem 值会同步改变响应式变体带冒号如m:space-x-2、pc:space-y-4类名中的冒号已由selector-escape处理可直接在 HTML 中使用兼容性说明space-x-reverse的margin-right方案天然支持 RTL 场景但具体视觉结果仍取决于整体 flex 方向与书写模式。九、在 amis / 独立工程中如何引用使用 amis-ui 时helper 工具类通过 packages/amis-ui/scss/helper.scss 统一引入该入口按模块import了 spacing、flex、grid、box-alignment、typography 等全部 helper 分类编译后 space-x / space-y 类即可直接用于页面元素独立样式工程可以直接import或复制 packages/amis-ui/scss/helper/spacing/_space-between.scss连同其依赖的$spacing、$devices、px2rem、media-device然后调用include make-spaces();按需生成自己的间距类定制间距刻度覆写$spacingmap 后重新编译所有 space 类、以及同体系下的 margin/padding 类都会随之更新保证全局间距风格统一。对于使用 amis 的开发者来说这套工具类与 amis 的 JSON 配置 schema 中的className属性天然契合——在配置里给容器组件写上className: space-y-2就能让内部渲染出的字段列表自动获得均匀间距无需为每个组件单独写样式。【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考