Container 容器与留白Container · Center · Spacer

三个小原语：Container 限制内容宽度并留出左右边距，Center 把内容居中，Spacer 在 flex 容器里把两边推开。

Container

内容居中、最大宽度按档位取，左右留白随视口变化（16 → 20 → 24 → 32）并避开刘海屏的安全区。

演示框比较窄时各档看起来一样；把窗口拉宽再切换。

内容最宽 560px

属性	类型	默认值	说明
`as`	`ElementType`	`'div'`	渲染成哪个元素。
`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`'lg'`	内容最大宽度：sm 560 / md 720 / lg 960 / xl 1200 / full 不限。
`gutter`	`boolean`	`true`	左右留白。
`center`	`boolean`	`true`	水平居中。
`…rest`	`HTMLAttributes`	—	ref、className、style 和其余原生属性透传到根节点。

空白区域正中的一句话

inline 用法

属性	类型	默认值	说明
`as`	`ElementType`	`'div'`	渲染成哪个元素。
`axis`	`'both' \| 'horizontal' \| 'vertical'`	`'both'`	在哪个方向上居中。
`inline`	`boolean`	`false`	行内（inline-grid），用来把图标之类的小东西居中。
`padding`	`Responsive<Space>`	—	四边内边距（间距档位）。
`paddingX`	`Responsive<Space>`	—	左右内边距，优先于 padding。
`paddingY`	`Responsive<Space>`	—	上下内边距，优先于 padding。
`…rest`	`HTMLAttributes`	—	ref、className、style 和其余原生属性透传到根节点。

放在 Stack、Inline、Toolbar 这些 flex 容器里。不传 size 时吃掉剩余空间，传了就是固定大小的空白。它对读屏隐藏。

收件箱12

属性	类型	默认值	说明
`size`	`Space`	—	固定大小（间距档位）。不传则撑满剩余空间。
`…rest`	`HTMLAttributes`	—	ref、className、style 和其余原生属性透传到根节点。