# 容器

限制页面内容的最大宽度。

```jsx
<Box style={{ background: "var(--gray-a2)", borderRadius: "var(--radius-3)" }}>
  <Container size="1">
    <DecorativeBox>
      <Box py="9" />
    </DecorativeBox>
  </Container>
</Box>
```

## [API 参考](#api-参考)

此组件基于 `div` 元素，并支持 [常见的边距属性](/themes/docs/overview/layout#margin-props)。

| Prop      | Type                                        | Default          |
| --------- | ------------------------------------------- | ---------------- |
| `asChild` | `boolean`                                   | No default value |
| `size`    | `Responsive<"1" \| "2" \| "3" \| "4">`      | `"4"`            |
| `display` | `Responsive<"none" \| "initial">`           | No default value |
| `align`   | `Responsive<"left" \| "center" \| "right">` | No default value |

容器大小使用以下 `max-width` 值，如有需要可以进行自定义。

| 大小       | CSS 变量        | 宽度     |
| ---------- | --------------- | -------- |
| `size="1"` | `--container-1` | `448px`  |
| `size="2"` | `--container-2` | `688px`  |
| `size="3"` | `--container-3` | `880px`  |
| `size="4"` | `--container-4` | `1136px` |

以下属性在 [Box](./box)、[Flex](./flex)、[Grid](./grid)、[Container](./container) 和 [Section](./section) 组件之间共享。有关布局组件的更多信息，请参阅 [布局](/themes/docs/overview/layout)。

| Prop              | Type                         | Default          |
| ----------------- | ---------------------------- | ---------------- |
| `p`               | `Responsive<enum \| string>` | No default value |
| `px`              | `Responsive<enum \| string>` | No default value |
| `py`              | `Responsive<enum \| string>` | No default value |
| `pt`              | `Responsive<enum \| string>` | No default value |
| `pr`              | `Responsive<enum \| string>` | No default value |
| `pb`              | `Responsive<enum \| string>` | No default value |
| `pl`              | `Responsive<enum \| string>` | No default value |
| `width`           | `Responsive<string>`         | No default value |
| `minWidth`        | `Responsive<string>`         | No default value |
| `maxWidth`        | `Responsive<string>`         | No default value |
| `height`          | `Responsive<string>`         | No default value |
| `minHeight`       | `Responsive<string>`         | No default value |
| `maxHeight`       | `Responsive<string>`         | No default value |
| `position`        | `Responsive<enum>`           | No default value |
| `inset`           | `Responsive<enum \| string>` | No default value |
| `top`             | `Responsive<enum \| string>` | No default value |
| `right`           | `Responsive<enum \| string>` | No default value |
| `bottom`          | `Responsive<enum \| string>` | No default value |
| `left`            | `Responsive<enum \| string>` | No default value |
| `overflow`        | `Responsive<enum>`           | No default value |
| `overflowX`       | `Responsive<enum>`           | No default value |
| `overflowY`       | `Responsive<enum>`           | No default value |
| `flexBasis`       | `Responsive<string>`         | No default value |
| `flexShrink`      | `Responsive<enum \| string>` | No default value |
| `flexGrow`        | `Responsive<enum \| string>` | No default value |
| `gridArea`        | `Responsive<string>`         | No default value |
| `gridColumn`      | `Responsive<string>`         | No default value |
| `gridColumnStart` | `Responsive<string>`         | No default value |
| `gridColumnEnd`   | `Responsive<string>`         | No default value |
| `gridRow`         | `Responsive<string>`         | No default value |
| `gridRowStart`    | `Responsive<string>`         | No default value |
| `gridRowEnd`      | `Responsive<string>`         | No default value |
| `alignSelf`       | `Responsive<enum>`           | No default value |
| `justifySelf`     | `Responsive<enum>`           | No default value |

<!--$-->

<!--/$-->