布局

正确处理布局问题。

布局组件

布局组件用于将布局职责与内容和交互性分离。这是the 关注点分离，它使您的应用程序易于维护和理解，而理解这些原则对于有效地构建您的界面至关重要。

盒子

盒子 是最基本的布局组件。盒子用于

• 为子元素提供间距。
• 对内容施加大小限制。
• 控制 flex 和 grid 容器内的布局行为。
• 使用其响应式 display 属性根据屏幕大小隐藏内容。

Flex

Flex 组件可以实现 Box 的所有功能，但它还提供了一组额外的 props 来沿轴线组织项目。它提供了对 CSS flexbox 属性 的便捷访问。

网格

网格 用于在列和行中组织内容。与 Box 和 Flex 一样，它旨在提供对底层 CSS 网格属性 的便捷访问，而没有自己的任何魔法。

部分

部分 在页面内容的较大部分之间提供一致的垂直间距，从而创造出层次感和分离感。只有一些预定义的大小用于不同的间距级别，以保持简单性和一致性。

容器

容器 的唯一责任是为其包裹的内容提供一致的 max-width。与部分一样，它只提供几个预定义的大小，这些大小与常见的断点和典型的内容宽度相匹配，以确保舒适的阅读。

常见布局 props

每个布局组件都有一组自己的专用 props，以及一组共享的通用布局 props。所有布局 props 都支持 响应式对象值.

填充

填充 props 可以访问 空间比例步长 或接受任何有效的 CSS 填充值.

<Box p="4" />
<Box p="100px">
<Box p={{ sm: '6', lg: '9' }}>

宽度

宽度 props 接受任何有效的 CSS 宽度值.

<Box width="100px" />
<Box width={{ md: '100vw', xl: '1400px' }} />

高度

高度 props 接受任何有效的 CSS 高度值.

<Box height="100px" />
<Box height={{ md: '100vh', xl: '600px' }} />

定位

定位 props 可以改变元素相对于文档正常流程的放置方式。和往常一样，每个属性都接受相应的 CSS 值，并且可以使用 空间比例步长 作为偏移值。

<Box position="relative" />
<Box position={{ initial: "relative", lg: "sticky" }} />

<Box inset="4" />
<Box inset={{ initial: "0", xl: "auto" }} />

<Box left="4" />
<Box left={{ initial: "0", xl: "auto" }} />

Flex 子项

每个布局组件都有一些 props 用于控制它作为 flex 容器的子项时的样式。

<Box flexBasis="100%" />
<Box flexShrink="0">
<Box flexGrow={{ initial: "0", lg: "1" }} />

网格子项

每个布局组件都有一些 props 用于控制它作为网格容器的子项时的样式。

<Box gridArea="header" />

<Box gridColumn="1 / 3" />
<Box gridColumnStart="2">
<Box gridColumnEnd={{ initial: "-1", md: "3", lg: "auto" }} />

<Box gridRow="1 / 3" />
<Box gridRowStart="2">
<Box gridRowEnd={{ initial: "-1", md: "3", lg: "auto" }} />

边距 props

边距 props 在大多数组件上都可用，以便在元素周围提供间距。它们不是布局组件独有的。

边距 props 可以访问 空间比例步长 或接受任何有效的 CSS 边距值

<Button m="4" />
<Button m="100px">
<Button m={{ sm: '6', lg: '9' }}>

边距 props 可能会在不渲染 HTML 节点或依赖其 Root 部分进行布局的组件上不可用。

独立使用

如果需要，可以使用 仅 Radix 主题的布局组件。只要确保你的 JavaScript 树摇工作正常，并导入为布局样式提供支持的 CSS

import '@radix-ui/themes/layout.css';

你仍然需要用 Theme 包装你的应用程序，以提供空间比例和缩放因子设置。