Flex 和 Grid

用于控制 Flex 和 Grid 布局的 JSX 样式属性

Flex Basis

使用flexBasis 属性来设置弹性项目的初始主尺寸。

<Flex>
  <Box flexBasis="25%" />
  <Box flexBasis="25%" />
  <Box flexBasis="50%" />
</Flex>

属性	CSS 属性	令牌类别
`flexBasis`	`flex-basis`	-

Flex 方向

使用 flexDir 或 flexDirection 属性来设置弹性容器中主轴的方向。

<Box display="flex" flexDirection="column">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

当使用 Flex 组件时，direction 属性是 flexDirection 的别名。

<Flex direction="column">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Flex>

属性	CSS 属性	令牌类别
`flexDir`, `flexDirection`	`flex-direction`	-

Flex 换行

使用 flexWrap 属性来设置弹性项目是强制单行显示还是可以多行换行。

<Box display="flex" flexWrap="wrap">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

当使用 Flex 组件时，wrap 属性是 flexWrap 的别名。

<Flex wrap="wrap">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Flex>

属性	CSS 属性	令牌类别
`flexWrap`	`flex-wrap`	-

Flex

使用 flex 属性来定义弹性容器或项目的灵活性。

<Flex>
  <Box flex="1" />
  <Box />
</Flex>

属性	CSS 属性	令牌类别
`flex`	`flex`	-

Flex 增长

使用 flexGrow 属性来设置弹性项目的弹性增长因子。

<Flex>
  <Box flexGrow="0" />
  <Box flexGrow="1" />
</Flex>

属性	CSS 属性	令牌类别
`flexGrow`	`flex-grow`	-

Flex 收缩

使用 flexShrink 属性来设置弹性项目的弹性收缩因子。

<Flex>
  <Box flexShrink="0" />
  <Box flexShrink="1" />
</Flex>

属性	CSS 属性	令牌类别
`flexShrink`	`flex-shrink`	-

顺序

使用 order 属性来设置弹性项目的顺序。

<Flex>
  <Box order="0" />
  <Box order="1" />
</Flex>

属性	CSS 属性	令牌类别
`order`	`order`	-

间隙

使用 gap 属性来设置弹性或网格容器中项目之间的间隙。

<Flex gap="4">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Flex>

属性	CSS 属性	令牌类别
`gap`	`gap`	`间距`

网格模板列

使用 gridTemplateColumns 属性来定义网格容器的列。

<Box display="grid" gridTemplateColumns="repeat(3, minmax(0, 1fr))">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

当使用 Grid 组件时，templateColumns 属性是 gridTemplateColumns 的别名。

<Grid templateColumns="repeat(3, minmax(0, 1fr))">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Grid>

网格模板开始/结束

使用 gridTemplateStart 和 gridTemplateEnd 属性来定义网格容器的开始和结束。

<Box display="grid" gridTemplateColumns="repeat(3, minmax(0, 1fr))">
  <Box>Item 1</Box>
  <Box gridColumn="span 2 / span 2">Item 2</Box>
  <Box>Item 3</Box>
</Box>

属性	CSS 属性	令牌类别
`gridTemplateStart`	`grid-template-start`	-
`gridTemplateEnd`	`grid-template-end`	-

网格模板行

使用 gridTemplateRows 属性来定义网格容器的行。

<Box display="grid" gap="4" gridTemplateRows="repeat(3, minmax(0, 1fr))">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

属性	CSS 属性	令牌类别
`gridTemplateRows`	`grid-template-rows`	-

网格行开始/结束

使用 gridRowStart 和 gridRowEnd 属性来定义网格项目的开始和结束。

<Box display="grid" gap="4" gridTemplateRows="repeat(3, minmax(0, 1fr))">
  <Box gridRowStart="1" gridRowEnd="3">
    Item 1
  </Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

属性	CSS 属性	令牌类别
`gridRowStart`	`grid-row-start`	-
`gridRowEnd`	`grid-row-end`	-

网格自动流

使用 gridAutoFlow 属性来定义自动放置的项目如何流入网格。

<Box display="grid" gridAutoFlow="row">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

属性	CSS 属性	令牌类别
`gridAutoFlow`	`grid-auto-flow`	-

网格自动列

使用 gridAutoColumns 属性来指定未明确定义大小的网格列的大小。

<Box display="grid" gridAutoColumns="120px">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

属性	CSS 属性	令牌类别
`gridAutoColumns`	`grid-auto-columns`	-

网格自动行

使用 gridAutoRows 属性来指定未明确定义大小的网格行的大小。

<Box display="grid" gridTemplateRows="200px" gridAutoRows="120px">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

属性	CSS 属性	令牌类别
`gridAutoRows`	`grid-auto-rows`	-

内容对齐

使用 justifyContent 属性来沿弹性容器的主轴对齐项目。

<Box display="flex" justifyContent="center">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

当使用 Flex 组件时，justify 属性是 justifyContent 的别名。

<Flex justify="center">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Flex>

属性	CSS 属性	令牌类别
`justifyContent`	`justify-content`	-

项目对齐

使用 justifyItems 属性来控制网格项目在其范围内的对齐方式。

<Box display="grid" justifyItems="center">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

属性	CSS 属性	令牌类别
`justifyItems`	`justify-items`	-

内容对齐

使用 alignContent 属性在有额外空间时沿弹性容器的交叉轴对齐内容行。

<Box display="flex" alignContent="center">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

当使用 Flex 组件时，align 属性是 alignContent 的别名。

<Flex align="center">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Flex>

属性	CSS 属性	令牌类别
`alignContent`	`align-content`	-

项目对齐

使用 alignItems 属性来控制网格项目在其范围内的对齐方式。

<Box display="grid" alignItems="center">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

自身对齐

使用 alignSelf 属性来控制网格项目在其范围内的对齐方式。

<Box display="grid">
  <Box alignSelf="center">Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

属性	CSS 属性	令牌类别
`alignSelf`	`align-self`	-

放置内容

使用 placeContent 属性同时沿块级和行内方向对齐内容。它的作用类似于 justifyContent 和 alignContent 的组合，可用于弹性容器和网格容器。

<Flex placeContent="center">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Flex>

属性	CSS 属性	令牌类别
`placeContent`	`place-content`	-

放置项目

使用 placeItems 属性同时沿块级和行内方向对齐项目。它的作用类似于 justifyItems 和 alignItems 的组合，可用于弹性容器和网格容器。

<Box display="grid" placeItems="center">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

属性	CSS 属性	令牌类别
`placeItems`	`place-items`	-

放置自身

使用 placeSelf 属性同时沿块级和行内方向对齐网格项目。

<Box display="grid">
  <Box placeSelf="center">Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

属性	CSS 属性	令牌类别
`placeSelf`	`place-self`	-

滤镜

交互

Flex 和 Grid

.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;}Flex Basis

Flex Basis