Container 容器
定宽居中容器：按 size 映射 --oas-container-* 宽度 token，margin-inline: auto 居中（逻辑属性，RTL 自动合规），max-width: min(100%, token) 保证窄屏不溢出。
基础用法
默认 lg 居中
尺寸
size 六档：xs（480）/ sm（576）/ md（768）/ lg（992）/ xl（1200）/ full（100%）。容器用 hover 底色标出实际宽度。
六档尺寸
关闭居中
center="false" 时取消居中（margin-inline: 0），容器贴行首（LTR 为左侧）。
center=false
内边距
padding 接受任意 token/值，作用于 padding-inline（逻辑内边距）。
padding 内边距
流体
fluid 布尔属性：完全不挂 max-width，容器恒为父宽 100%（纯流体）；与 size 正交，存在时 size 的限宽失效。适合需要内容铺满、但子内容仍按窄屏保护（width: 100%）的场景。
fluid 流体对照限宽
突破定宽（breakout）
slot 内任意子元素带 breakout 属性即突破定宽撑满视口宽（经典公式 width: 100vw + margin-inline: calc(50% - 50vw)），适合「内容限宽、局部横幅全宽」的页面结构（如容器内插一条横贯视口的 banner）。
breakout 全宽横幅
视口滚动条注意：
100vw含纵向滚动条宽度，页面出现滚动条时 breakout 元素会横向溢出，需在页面顶层包裹层配overflow-x: clip（或overflow-x: hidden）抑制——不要设在容器自身（会裁掉突破效果）。
空容器
无子元素不报错、不占位。
空容器
API
oas-container
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
center | 是否居中（center="false" 关闭） | string | true |
fluid | 布尔，完全不挂 max-width（纯流体 100%）；与 size 正交，存在时 size 限宽失效 | boolean | — |
padding | 内边距 token/值（作用于 padding-inline） | — | — |
size | 定宽档位，映射 --oas-container-* token | string | lg |
插槽
| 名称 | 说明 |
|---|---|
| 默认 | 容器内容 |
CSS 变量
| CSS 变量 | 默认值 |
|---|---|
--oas-container-full | — |
--oas-container-lg | — |
--oas-container-max | var(--oas-container-lg, 992px) |
--oas-container-md | — |
--oas-container-padding | 0 |
--oas-container-sm | — |
--oas-container-xl | — |
--oas-container-xs | — |