布局

宽高比

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

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

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

属性	CSS 属性	令牌类别
aspectRatio	aspect-ratio	aspectRatios

分页/分列

断后行为

使用 breakAfter 属性设置元素之后页面、列或区域断裂的行为。

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

属性	CSS 属性	令牌类别
breakAfter	break-after	-

断前行为

使用 breakBefore 属性设置元素之前页面、列或区域断裂的行为。

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

属性	CSS 属性	令牌类别
breakBefore	break-before	-

断内行为

使用 breakInside 属性设置元素内部页面、列或区域断裂的行为。

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

属性	CSS 属性	令牌类别
breakInside	break-inside	-

盒装饰断裂

使用 boxDecorationBreak 属性设置当盒子跨多行、多列或多页断裂时，盒子装饰应如何表现。

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

属性	CSS 属性	令牌类别
boxDecorationBreak	box-decoration-break	-

盒模型

使用 boxSizing 属性设置元素的盒模型。

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

属性	CSS 属性	令牌类别
boxSizing	box-sizing	-

列

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

<Box columns={2} />

属性	CSS 属性	令牌类别
columns	columns	-

浮动

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

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

属性	CSS 属性	令牌类别
float	float	-

清除浮动

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

<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 属性设置元素是否应明确创建一个新的堆叠上下文。

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

属性	CSS 属性	令牌类别
isolation	isolation	-

对象适应

使用 objectFit 属性设置图像或视频应如何调整大小以适应其容器。

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

属性	CSS 属性	令牌类别
objectFit	object-fit	-

对象位置

使用 objectPosition 属性设置元素在其容器内应如何定位。

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

属性	CSS 属性	令牌类别
objectPosition	object-position	-

溢出

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

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

属性	CSS 属性	令牌类别
overflow	overflow	-

超出滚动行为

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

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

属性	CSS 属性	令牌类别
overscrollBehavior	overscroll-behavior	-

定位

使用 position 工具函数设置元素的定位。

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

属性	CSS 属性	令牌类别
position	position	-

上 / 右 / 下 / 左

使用 top、right、bottom 和 left 工具函数设置元素的定位。

<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} 工具函数的逻辑等效项，根据书写模式设置元素的定位。

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

属性	CSS 属性	令牌类别
top	top	间距
right	right	间距
bottom	bottom	间距
left	left	间距
start、insetStart、insetInlineStart	inset-inline-start	间距
end、insetEnd、insetInlineEnd	inset-inline-end	间距
insetX、insetInline	inset-inline	间距
insetY、insetBlock	inset-inline	间距

可见性

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

<Box visibility="hidden" />

属性	CSS 属性	令牌类别
visibility	visibility	-

Z-Index

使用 zIndex 属性设置元素的 Z 轴顺序。

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

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

属性	CSS 属性	令牌类别
zIndex	z-index	zIndices