Space 间距
水平/垂直等距布局容器。
水平
水平间距
垂直
垂直间距
尺寸与换行
size 支持 xs（4px）/ small（8px）/ medium（12px，默认）/ large（24px）/ xl（32px）五档，或直接写数字像素；非法值回落 medium 并提示告警。
五种间距
大间距与换行
size 也支持逗号分隔的两值数组（如 size="8,16"）：第一个值为横向间距、第二个为纵向间距，wrap 换行时纵向间距生效。
size 数组（横向 / 纵向）
对齐
交叉轴对齐
分隔符
separator 在子项间插入分隔符号（次要文字色）；也支持 slot="separator" 自定义分隔内容（优先于字符串，例如竖排分割线）。
字符串分隔符
自定义分隔插槽（slot=separator）
分布
justify 控制主轴分布：start / center / end / space-between / space-around / space-evenly；不设置时保持默认起点排列。
justify 分布
反向排列
reverse 翻转主轴方向：水平 → row-reverse（从右到左）、垂直 → column-reverse（从下到上）。
reverse 反向排列
子项填满
fill 让子项等分填满容器（flex: 1 等价物）；fill-ratio（百分比，默认 100）按比例分配——子项自身可设置，容器级 fill-ratio 作为缺省。
fill 子项等分填满
弹簧占位
oas-space 本身是 flex 容器，在子项间放一个 style="flex: 1" 的空 div 即充当弹簧占位（spacer）：它吸收剩余空间，把后续子项推到容器另一端——「左侧标题 + 右侧操作组」的页头/工具条布局无需新增属性即可实现。若要让所有子项按比例弹性伸缩，则用 fill / fill-ratio（见「子项填满」）。
弹簧占位（spacer）
行内嵌入
oas-space 默认是块级 flex 容器；需要嵌在文字段落中时，给宿主加一行 style="display: inline-flex" 即可——行内是宿主 CSS 的事，不是组件属性。
行内嵌入文字段落
正文中间嵌一组
响应式
direction 与 size 支持断点简写：空格分隔的基础值 + 若干 断点:值（如 direction="column md:row"、size="small md:large"）。窗口在断点宽度以下时用基础值，达到断点宽度（移动优先 min-width）后切到断点值。
断点表：
| 断点 | 宽度 |
|---|---|
sm | 640px |
md | 768px |
lg | 1024px |
xl | 1280px |
方向响应式：窄屏竖排、md 起横排
间距响应式：small 起、md 起 large
紧凑组合（oas-compact）
oas-compact 让相邻表单控件（oas-button / oas-input / oas-input-number / oas-select）贴边合并边框：相邻处 -1px 重叠、首尾圆角、中间直角；支持 vertical（纵向贴合）、disabled（全组禁用）、block（宽度 100%）。
input + button 贴合
select + button 贴合
纵向贴合
block 撑满与 disabled 透传
API
oas-space
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
align | 对齐 | string | — |
direction | 方向；支持断点简写：空格分隔的基础值 + 若干 断点:值（如 column md:row），断点表 sm=640px / md=768px / lg=1024px / xl=1280px（移动优先 min-width），低于断点用基础值 | SpaceDirection | horizontal |
fill | 子项等分填满容器（flex: 1 等价物） | boolean | — |
fill-ratio | 配合 fill 的分配比例（百分比，默认 100）：子项自身可设、容器级作缺省 | string | — |
justify | 主轴分布：start / center / end / space-between / space-around / space-evenly（缺省不设） | string | — |
reverse | 反向排列：水平 → row-reverse、垂直 → column-reverse | boolean | — |
separator | 子项间分隔符字符串（次要文字色）；slot="separator" 自定义分隔优先于字符串 | string | — |
size | 间距：xs（4px）/ small（8px）/ medium（12px，默认）/ large（24px）/ xl（32px），或数字像素；逗号分隔两值（如 8,16）分别控制横向/纵向间距；支持断点简写（如 small md:large，断点表同 direction）；非法值回落 medium 并告警 | string | medium |
wrap | 是否换行 | boolean | — |
| 名称 | 说明 |
|---|---|
| 默认 | 子项 |
separator | 自定义分隔内容（如 <oas-divider direction="vertical">），优先于 separator 字符串 |
oas-compact
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
aria-label | — | boolean | — |
block | 宽度 100%（撑满父容器） | — | — |
disabled | 透传全组禁用 | boolean | — |
vertical | 纵向贴合（相邻处上下 -1px 重叠，圆角方向改上下） | boolean | — |
| 名称 | 说明 |
|---|---|
| 默认 | 相邻表单控件（oas-button / oas-input / oas-input-number / oas-select） |