布局

¥Layout

正确处理布局问题。

布局组件

¥Layout components

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

¥Layout components are used to separate layout responsibilities from content and interactivity. This is the separation of concerns that makes your app maintainable and easy to reason about, and understanding these principles is key to building your interfaces effectively.

方框

¥Box

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

¥Box is the most fundamental layout component. Box is used to:

• 为子元素提供间距。

  ¥Provide spacing to child elements.

• 对内容施加大小限制。

  ¥Impose sizing constraints on content.

• 控制 flex 和 grid 容器内的布局行为。

  ¥Control layout behaviour within flex and grid containers.

• 使用其响应式 display 属性，根据屏幕尺寸隐藏内容。

  ¥Hide content based on screen size using its responsive display prop.

弹性元素

¥Flex

弹性元素 组件可以完成 Box 的所有功能，但附带一组额外的属性，用于沿轴组织项目。它提供了对 CSS 弹性框属性 的便捷访问

¥Flex component does everything that Box can do, but comes with an additional set of props to organize items along an axis. It provides convenient access to the CSS flexbox properties

网格

¥Grid

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

¥Grid is used to organize the content in columns and rows. Like Box and Flex, it’s made to provide convenient access to the underlying CSS grid properties without any magic of its own.

部分

¥Section

部分 在页面内容的主要部分之间提供一致的垂直间距，从而营造出层次感和分离感。只有一些针对不同间距级别的预定义尺寸，以保持简洁和一致。

¥Section provides a consistent vertical spacing between the larger parts of your page content, creating a sense of hierarchy and separation. There’s just a few pre-defined sizes for different spacing levels to keep things simple and consistent.

容器

¥Container

容器 的唯一职责是为其封装的内容提供一致的 max-width。与 Section 一样，它仅带有一些预定义的大小，可以与常见的断点和典型的内容宽度完美配合，以实现舒适的阅读体验。

¥Container’s sole responsibility is to provide a consistent max-width to the content it wraps. Like Section, it comes just with a couple of pre-defined sizes that work well with common breakpoints and typical content widths for comfortable reading.

常用布局属性

¥Common layout props

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

¥Each layout component has a set of it’s own specialized props and also a shared set of common layout props. All layout props support responsive object values.

内边距

¥Padding

padding props 可以访问 空间缩放步骤 或接受任何有效的 CSS 填充值。

¥Padding props can access the space scale steps or accept any valid CSS padding value.

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

宽度

¥Width

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

¥Width props accept any valid CSS width value.

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

高度

¥Height

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

¥Height props accept any valid CSS height value.

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

定位

¥Positioning

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

¥Positioning props can change how the element is placed relative to the normal flow of the document. As usual, the corresponding CSS values are accepted for each property, and the space scale steps can be used for the offset values.

<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 children

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

¥Each layout component has props used to control the style when it is a child of a flex container.

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

网格子元素

¥Grid children

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

¥Each layout component has props used to control the style when it is a child of a grid container.

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

边距属性

¥Margin props

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

¥Margin props are available on most components in order to provide spacing around the elements. They are not exclusive to layout components.

边距 props 可以访问 空间缩放步骤 或接受任何有效的 CSS 边距值

¥Margin props can access the space scale steps or accept any valid CSS margin value

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

对于不渲染 HTML 节点或依赖其 Root 部分进行布局的组件，margin 属性可能不可用。

¥The margin props may be unavailable on components that don’t render a HTML node or rely on their Root part for layout.

独立使用

¥Standalone usage

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

¥If needed, it’s possible to use just the layout component from Radix Themes. Just make sure that JavaScript tree-shaking works on your side, and import the CSS that powers the layout styles:

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

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

¥You’ll still have to wrap your app with Theme to provide the space scale and scaling factor settings.