跳到主要内容

Container / Center / Spacer限宽 · 居中 · 弹性空白

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

Container

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

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

内容最宽 560px

Container 属性

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

Center

空白区域正中的一句话
inline 用法

Center 属性

属性类型默认值说明
asElementType'div'渲染成哪个元素。
axis'both' | 'horizontal' | 'vertical''both'在哪个方向上居中。
inlinebooleanfalse行内(inline-grid),用来把图标之类的小东西居中。
paddingResponsive<Space>—四边内边距(间距档位)。
paddingXResponsive<Space>—左右内边距,优先于 padding。
paddingYResponsive<Space>—上下内边距,优先于 padding。
…restHTMLAttributes—ref、className、style 和其余原生属性透传到根节点。

Spacer

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

收件箱12

Spacer 属性

属性类型默认值说明
sizeSpace—固定大小(间距档位)。不传则撑满剩余空间。
…restHTMLAttributes—ref、className、style 和其余原生属性透传到根节点。