尺寸

宽度

¥Width

使用 width 或 w 属性设置元素的宽度。

¥Use the width or w property to set the width of an element.

// hardcoded values
<Box width="64px" />
<Box w="4rem" />

// token values
<Box width="5" />
<Box w="5" />

分数宽度

¥Fractional width

可以使用 width 或 w 属性设置分数宽度。

¥Use can set fractional widths using the width or w property.

值可以在以下范围内：

¥Values can be within the following ranges:

• 三分之一：1/3 到 2/3

• Fourths：1/4 到 3/4

• Fifths：1/5 到 4/5

• 六分之一：1/6 到 5/6

• 十二分之一：1/12 到 11/12

// half width
<Flex>
  <Box width="1/2" />
  <Box width="1/2" />
</Flex>

// thirds
<Flex>
  <Box width="1/3" />
  <Box width="2/3" />
</Flex>

// fourths
<Flex>
  <Box width="1/4" />
  <Box width="3/4" />
</Flex>

// fifths
<Flex>
  <Box width="1/5" />
  <Box width="4/5" />
</Flex>

// sixths
<Flex>
  <Box width="1/6" />
  <Box width="5/6" />
</Flex>

// twelfths
<Flex>
  <Box width="3/12" />
  <Box width="9/12" />
</Flex>

视口宽度

¥Viewport width

使用现代视口宽度值 dvw、svw、lvw。

¥Use the modern viewport width values dvw, svw, lvw.

dvw 映射到 100dvw，svw 映射到 100svw，lvw 映射到 100lvw。

<Box width="dvw" />
<Box w="dvw" /> // shorthand

属性	CSS 属性	标记类别
w, width	width	sizes

最大宽度

¥Max width

使用 maxWidth 或 maxW 属性设置元素的最大宽度。

¥Use the maxWidth or maxW property to set the maximum width of an element.

// hardcoded values
<Box maxWidth="640px" />
<Box maxW="4rem" /> // shorthand

// token values
<Box maxWidth="xl" />
<Box maxW="2xl" /> // shorthand

属性	CSS 属性	标记类别
maxW, maxWidth	max-width	sizes

最小宽度

¥Min width

使用 minWidth 或 minW 属性设置元素的最小宽度。

¥Use the minWidth or minW property to set the minimum width of an element.

// hardcoded values
<Box minWidth="64px" />
<Box minW="4rem" /> // shorthand

// token values
<Box minWidth="8" />
<Box minW="10" /> // shorthand

属性	CSS 属性	标记类别
w, width	width	sizing
maxW, maxWidth	max-width	sizing
minW, minWidth	min-width	sizing

高度

¥Height

使用 height 或 h 属性设置元素的高度。

¥Use the height or h property to set the height of an element.

// hardcoded values
<Box height="40px" />
<Box h="0.4rem" /> // shorthand

// token values
<Box height="5" />
<Box h="5" /> // shorthand

分数高度

¥Fractional height

可以使用 height 或 h 属性设置分数高度。

¥Use can set fractional heights using the height or h property.

值可以在以下范围内：

¥Values can be within the following ranges:

• 三分之一：1/3 到 2/3

• Fourths：1/4 到 3/4

• Fifths：1/5 到 4/5

• 六分之一：1/6 到 5/6

<Box height="1/2" />
<Box h="1/2" /> // shorthand

相对高度

¥Relative heights

使用现代相对高度值 dvh、svh、lvh。

¥Use the modern relative height values dvh, svh, lvh.

dvh 映射到 100dvh，svh 映射到 100svh，lvh 映射到 100lvh。

<Box height="dvh" />
<Box h="dvh" /> // shorthand

最大高度

¥Max height

使用 maxHeight 或 maxH 属性设置元素的最大高度。

¥Use the maxHeight or maxH property to set the maximum height of an element.

// hardcoded values
<Box maxHeight="40px" />
<Box maxH="0.4rem" /> // shorthand

// token values
<Box maxHeight="8" />
<Box maxH="10" /> // shorthand

最小高度

¥Min height

使用 minHeight 或 minH 属性设置元素的最小高度。

¥Use the minHeight or minH property to set the minimum height of an element.

// hardcoded values
<Box minHeight="40px" />
<Box minH="0.4rem" /> // shorthand

// token values
<Box minHeight="8" />
<Box minH="10" /> // shorthand

属性	CSS 属性	标记类别
h, height	height	sizes
maxH, maxHeight	max-height	sizes
minH, minHeight	min-height	sizes