布局

用于控制元素宽度、高度和间距的 JSX 样式属性

宽高比

¥Aspect Ratio

使用 aspectRatio 属性设置元素所需的宽高比。

¥Use the aspectRatio prop to set the desired aspect ratio of an element.

// raw value
<Box aspectRatio="1.2" />

// token
<Box aspectRatio="square" />

属性	CSS 属性	标记类别
`aspectRatio`	`aspect-ratio`	`aspectRatios`

中断

¥Break

后中断

¥Break After

使用 breakAfter 属性设置元素后页面、列或区域分隔符的行为方式。

¥Use the breakAfter prop to set how page, column, or region breaks should behave after an element.

<Box columns="2">
  <Box>Item 1</Box>
  <Box breakAfter="page">Item 2</Box>
</Box>

属性	CSS 属性	标记类别
`breakAfter`	`break-after`	*

前中断

¥Break Before

使用 breakBefore 属性设置元素前页面、列或区域分隔符的行为方式。

¥Use the breakBefore prop to set how page, column, or region breaks should behave before an element.

<Box columns="2">
  <Box>Item 1</Box>
  <Box breakBefore="page">Item 2</Box>
</Box>

属性	CSS 属性	标记类别
`breakBefore`	`break-before`	*

内部中断

¥Break Inside

使用 breakInside 属性设置元素内页面、列或区域分隔符的行为方式。

¥Use the breakInside prop to set how page, column, or region breaks should behave inside an element.

<Box columns="2">
  <Box>Item 1</Box>
  <Box breakInside="avoid">Item 2</Box>
</Box>

属性	CSS 属性	标记类别
`breakInside`	`break-inside`	*

盒子装饰中断

¥Box Decoration Break

使用 boxDecorationBreak 属性设置当框跨越多行、多列或多页时，框装饰的行为方式。

¥Use the boxDecorationBreak prop to set how box decorations should behave when the box breaks across multiple lines, columns, or pages.

<Box bgImage="linear-gradient(red, blue)" boxDecorationBreak="clone">
  Chakra is <br /> great!
</Box>

属性	CSS 属性	标记类别
`boxDecorationBreak`	`box-decoration-break`	*

盒子大小

¥Box Sizing

使用 boxSizing 属性设置元素的框大小。

¥Use the boxSizing prop to set the box sizing of an element.

<Box boxSizing="border-box" padding="4" width="8" height="8" />

属性	CSS 属性	标记类别
`boxSizing`	`box-sizing`	*

列

¥Columns

使用 columns 属性设置元素的列数。

¥Use the columns prop to set the number of columns for an element.

<Box columns={2} />

属性	CSS 属性	标记类别
`columns`	`columns`	*

浮动

¥Float

使用 float 属性设置元素的浮动。

¥Use the float prop to set the float of an element.

<Box>
  <Text>As much mud in the streets...</Text>
  <Box float="left">Float me</Box>
</Box>

属性	CSS 属性	标记类别
`float`	`float`	*

清除

¥Clear

使用 clear 属性设置元素是否必须移动到（清除）其之前的浮动元素下方。

¥Use the clear prop to set whether an element must be moved below (cleared) floating elements that precede it.

<Box>
  <Box float="left">Left</Box>
  <Box float="right">Right</Box>
  <Box clear="none">
    As much mud in the streets as if the waters had but newly retired from the
    face of the earth, and it would not be wonderful to meet a Megalosaurus,
    forty feet long or so, waddling like an elephantine lizard up Holborn Hill.
  </Box>
</Box>

属性	CSS 属性	标记类别
`clear`	`clear`	*

隔离

¥Isolation

使用 isolation 属性设置元素是否应显式创建新的堆叠上下文。

¥Use the isolation prop to set whether an element should explicitly create a new stacking context.

<Box isolation="isolate">
  <Box bg="red.500" width="10" height="10" />
</Box>

属性	CSS 属性	标记类别
`isolation`	`isolation`	*

对象适配

¥Object Fit

使用 objectFit 属性设置图片或视频的大小以适应其容器。

¥Use the objectFit prop to set how an image or video should be resized to fit its container.

<Image src="..." objectFit="cover" width="10" height="10" />

属性	CSS 属性	标记类别
`objectFit`	`object-fit`	*

对象位置

¥Object Position

使用 objectPosition 属性设置元素在其容器内的定位方式。

¥Use the objectPosition prop to set how an element should be positioned within its container.

<Image src="..." objectPosition="center" width="10" height="10" />

属性	CSS 属性	标记类别
`objectPosition`	`object-position`	*

溢出

¥Overflow

使用 overflow 属性控制如何处理超出元素尺寸的内容。此属性决定是否裁剪内容、添加滚动条或显示溢出内容。

¥Use the overflow prop to control how content that exceeds an element's dimensions is handled. This property determines whether to clip the content, add scrollbars, or display the overflow content.

<Box overflow="hidden" maxHeight="120px" />
<Box overflow="auto" maxHeight="120px" />

属性	CSS 属性	标记类别
`overflow`	`overflow`	*

滚动行为

¥Overscroll Behavior

使用 overscrollBehavior 属性控制浏览器到达滚动区域边界时的操作。

¥Use the overscrollBehavior prop to control what the browser does when reaching the boundary of a scrolling area.

<Box maxHeight="120px" overscrollBehavior="contain" />

属性	CSS 属性	标记类别
`overscrollBehavior`	`overscroll-behavior`	*

位置

¥Position

使用 position 实用程序设置元素的位置。

¥Use the position utilities to set the position of an element.

<Box position="absolute" />
<Box pos="absolute" /> // shorthand

属性	CSS 属性	标记类别
`position`	`position`	*

上 / 右 / 下 / 左

¥Top / Right / Bottom / Left

使用 top、right、bottom 和 left 实用程序设置元素的位置。

¥Use the top, right, bottom and left utilities to set the position of an element.

<Box position="absolute" top="0" left="0" />

// using spacing tokens
<Box position="absolute" top="4" />

// using hardcoded values
<Box position="absolute" top="100px" />

使用 inset{Start|End} 实用程序的逻辑等效组件，根据书写模式设置元素的位置。

¥Use the logical equivalents of inset{Start|End} utilities to set the position of an element based on the writing mode.

<Box position="absolute" insetStart="0" />

属性	CSS 属性	标记类别
`top`	`top`	`spacing`
`right`	`right`	`spacing`
`bottom`	`bottom`	`spacing`
`left`	`left`	`spacing`
`start`, `insetStart`, `insetInlineStart`	`inset-inline-start`	`spacing`
`end` , `insetEnd`, `insetInlineEnd`	`inset-inline-end`	`spacing`
`insetX`, `insetInline`	`inset-inline`	`spacing`
`insetY`, `insetBlock`	`inset-inline`	`spacing`

可见性

¥Visibility

使用 visibility 属性控制元素的可见性。

¥Use the visibility prop to control the visibility of an element.

<Box visibility="hidden" />

属性	CSS 属性	标记类别
`visibility`	`visibility`	*

Z 轴索引

¥Z-Index

使用 zIndex 属性设置元素的 z-index。

¥Use the zIndex prop to set the z-index of an element.

// using hardcoded values
<Box zIndex="1" />

// using token
<Box zIndex="overlay" />

属性	CSS 属性	标记类别
`zIndex`	`z-index`	`zIndices`

交互性

列表

布局

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}宽高比

宽高比