布局

正确处理布局问题。

布局组件

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

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' }}>

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

宽度

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

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

Prop	Type	Default
`width`	`Responsive<string>`	No default value
`minWidth`	`Responsive<string>`	No default value
`maxWidth`	`Responsive<string>`	No default value

高度

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

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

Prop	Type	Default
`height`	`Responsive<string>`	No default value
`minHeight`	`Responsive<string>`	No default value
`maxHeight`	`Responsive<string>`	No default value

定位

定位属性可以改变元素相对于文档正常流的放置方式。与往常一样，每个属性都接受相应的 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" }} />

Prop	Type	Default
`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

Flex 子元素

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

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

Prop	Type	Default
`flexBasis`	`Responsive<string>`	No default value
`flexShrink`	`Responsive<enum \| string>`	No default value
`flexGrow`	`Responsive<enum \| string>`	No default value

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

Prop	Type	Default
`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

外边距属性

外边距属性在大多数组件上可用，以提供元素周围的间距。它们并不专属于布局组件。

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

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

Prop	Type	Default
`m`	`Responsive<enum \| string>`	No default value
`mx`	`Responsive<enum \| string>`	No default value
`my`	`Responsive<enum \| string>`	No default value
`mt`	`Responsive<enum \| string>`	No default value
`mr`	`Responsive<enum \| string>`	No default value
`mb`	`Responsive<enum \| string>`	No default value
`ml`	`Responsive<enum \| string>`	No default value

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

独立使用

如果需要，可以仅使用 Radix Themes 的布局组件。只需确保 JavaScript 树摇动在您这边正常工作，并导入支持布局样式的 CSS：

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

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

上一篇样式 Styling

下一篇发布版本 Releases

在 GitHub 上编辑此页面

概览 Overview

主题 Theme

布局 Layout

排版

组件

通用工具 Utilities

布局