Stack / Inline 排列Stack · Inline

两个最常用的布局原语。Stack 把子项纵向排开，Inline 横向排开并在放不下时换行。间距只填档位数字，不写像素；所有间距、对齐属性都支持按断点给值。

Stack

第一项

第二项，稍微长一点

第三项

divider 在子项之间插入 Divider；也可以传自定义节点。

账号与安全

通知

外观

属性	类型	默认值	说明
`as`	`ElementType`	`'div'`	渲染成哪个元素。
`gap`	`Responsive<Space>`	`4`	子项间距。
`align`	`Responsive<'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'>`	`'stretch'`	交叉轴（横向）对齐。
`justify`	`Responsive<'start' \| 'center' \| 'end' \| 'between' \| 'around' \| 'evenly'>`	`'start'`	主轴（纵向）分布。容器有多余高度时才看得出来。
`divider`	`boolean \| ReactNode`	`false`	子项之间插入分隔线。
`padding`	`Responsive<Space>`	—	四边内边距（间距档位）。
`paddingX`	`Responsive<Space>`	—	左右内边距，优先于 padding。
`paddingY`	`Responsive<Space>`	—	上下内边距，优先于 padding。
`…rest`	`HTMLAttributes`	—	ref、className、style 和其余原生属性透传到根节点。

把窗口拉窄，或者关掉 wrap 看看。Cluster 是 Inline 的别名。

设计前端无障碍动效响应式主题设计令牌组件库

wrap

Inline 放不下时整块换行，不需要断点：窄屏上按钮组自然落到文字下面。

自动备份每天凌晨 3 点备份一次

属性	类型	默认值	说明
`as`	`ElementType`	`'div'`	渲染成哪个元素。
`gap`	`Responsive<Space>`	`2`	子项间距。
`rowGap`	`Responsive<Space>`	—	换行后的行距，默认同 gap。
`align`	`Responsive<'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'>`	`'center'`	交叉轴（纵向）对齐。
`justify`	`Responsive<'start' \| 'center' \| 'end' \| 'between' \| 'around' \| 'evenly'>`	`'start'`	主轴（横向）分布。
`wrap`	`boolean`	`true`	放不下时换行。
`padding`	`Responsive<Space>`	—	四边内边距（间距档位）。
`paddingX`	`Responsive<Space>`	—	左右内边距，优先于 padding。
`paddingY`	`Responsive<Space>`	—	上下内边距，优先于 padding。
`…rest`	`HTMLAttributes`	—	ref、className、style 和其余原生属性透传到根节点。

Space 是间距档位：0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16，对应 --ok-s-*（档位 × 4px）。子项默认 min-width: 0，长文字不会把容器撑破。