布局

正确处理布局问题。

布局组件

布局组件用于将布局职责与内容和交互分离。这是关键的关注点分离，它使您的应用程序可维护且易于推理，理解这些原则是有效构建界面的关键。

Box

Box 是最基本的布局组件。Box 用于：

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

Flex

Flex 组件可以执行 Box 组件的所有操作，但还附带一组额外的属性来沿轴线组织项目。它提供了对 CSS flexbox 属性 的便捷访问。

Grid

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

Section

Section 在页面内容的不同部分之间提供一致的垂直间距，从而创建层次感和分隔感。只有几个预定义的尺寸用于不同的间距级别，以保持简单和一致。

Container

Container 的唯一职责是为其包裹的内容提供一致的 max-width。与 Section 类似，它只带有一些预定义的尺寸，这些尺寸与常见的断点和典型的舒适阅读内容宽度配合良好。

通用布局属性

每个布局组件都有一组其自身特定的属性，以及一组共享的通用布局属性。所有布局属性都支持响应式对象值。

内边距

内边距属性可以访问间距比例步长或接受任何有效的 CSS 内边距值。

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

宽度

宽度属性接受任何有效的 CSS 宽度值。

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

高度

高度属性接受任何有效的 CSS 高度值。

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

定位

定位属性可以更改元素相对于文档正常流的放置方式。通常，每个属性都接受相应的 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 子项

每个布局组件都具有用于控制其作为 flex 容器子项时的样式的属性。

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

Grid 子项

每个布局组件都具有用于控制其作为 grid 容器子项时的样式的属性。

<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" }} />

外边距属性

大多数组件上都提供了外边距属性，以便在元素周围提供间距。它们并非布局组件独有。

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

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

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

独立使用

如果需要，可以仅使用 Radix Themes 中的布局组件。只需确保 JavaScript tree-shaking 在您这边工作，并导入为布局样式提供支持的 CSS

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

您仍然需要使用 Theme 包裹您的应用程序，以提供间距比例和缩放因子设置。