尺寸
用于调整元素尺寸的 JSX 样式属性
宽度
使用width 或 w 属性来设置元素的宽度。
// hardcoded values
<Box width="64px" />
<Box w="4rem" />
// token values
<Box width="5" />
<Box w="5" />分数宽度
可以使用 width 或 w 属性设置分数宽度。
值可在以下范围之内
- 三分之一：
1/3到2/3 - 四分之一：
1/4到3/4 - 五分之一：
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>视口宽度
使用现代视口宽度值 dvw, svw, lvw。
dvw 映射到 100dvw，svw 映射到 100svw，lvw 映射到 100lvw。
<Box width="dvw" />
<Box w="dvw" /> // shorthand| 属性 | CSS 属性 | Token 类别 |
|---|---|---|
w, width | width | sizes |
最大宽度
使用 maxWidth 或 maxW 属性来设置元素的最大宽度。
// hardcoded values
<Box maxWidth="640px" />
<Box maxW="4rem" /> // shorthand
// token values
<Box maxWidth="xl" />
<Box maxW="2xl" /> // shorthand| 属性 | CSS 属性 | Token 类别 |
|---|---|---|
maxW, maxWidth | max-width | sizes |
最小宽度
使用 minWidth 或 minW 属性来设置元素的最小宽度。
// hardcoded values
<Box minWidth="64px" />
<Box minW="4rem" /> // shorthand
// token values
<Box minWidth="8" />
<Box minW="10" /> // shorthand| 属性 | CSS 属性 | Token 类别 |
|---|---|---|
w, width | width | sizing |
maxW, maxWidth | max-width | sizing |
minW, minWidth | min-width | sizing |
高度
使用 height 或 h 属性来设置元素的高度。
// hardcoded values
<Box height="40px" />
<Box h="0.4rem" /> // shorthand
// token values
<Box height="5" />
<Box h="5" /> // shorthand分数高度
可以使用 height 或 h 属性设置分数高度。
值可在以下范围之内
- 三分之一：
1/3到2/3 - 四分之一：
1/4到3/4 - 五分之一：
1/5到4/5 - 六分之一：
1/6到5/6
<Box height="1/2" />
<Box h="1/2" /> // shorthand相对高度
使用现代相对高度值 dvh, svh, lvh。
dvh 映射到 100dvh，svh 映射到 100svh，lvh 映射到 100lvh。
<Box height="dvh" />
<Box h="dvh" /> // shorthand最大高度
使用 maxHeight 或 maxH 属性来设置元素的最大高度。
// hardcoded values
<Box maxHeight="40px" />
<Box maxH="0.4rem" /> // shorthand
// token values
<Box maxHeight="8" />
<Box maxH="10" /> // shorthand最小高度
使用 minHeight 或 minH 属性来设置元素的最小高度。
// hardcoded values
<Box minHeight="40px" />
<Box minH="0.4rem" /> // shorthand
// token values
<Box minHeight="8" />
<Box minH="10" /> // shorthand| 属性 | CSS 属性 | Token 类别 |
|---|---|---|
h, height | height | sizes |
maxH, maxHeight | max-height | sizes |
minH, minHeight | min-height | sizes |