Skip to Content
文档

弹性和网格

用于控制弹性和网格布局的 JSX 样式属性

弹性基础

¥Flex Basis

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

¥Use the flexBasis prop to set the initial main size of a flex item.

<Flex>
  <Box flexBasis="25%" />
  <Box flexBasis="25%" />
  <Box flexBasis="50%" />
</Flex>
属性CSS 属性标记类别
flexBasisflex-basis*

弹性方向

¥Flex Direction

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

¥Use the flexDir or flexDirection prop to set the direction of the main axis in a flex container.

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

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

¥When using Flex component, the direction prop is aliased to flexDirection.

<Flex direction="column">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Flex>
属性CSS 属性标记类别
flexDir, flexDirectionflex-direction*

弹性封装

¥Flex Wrap

使用 flexWrap 属性设置弹性项目是强制排在一行还是换行。

¥Use the flexWrap prop to set whether flex items are forced onto one line or can wrap onto multiple lines.

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

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

¥When using Flex component, the wrap prop is aliased to flexWrap.

<Flex wrap="wrap">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Flex>
属性CSS 属性标记类别
flexWrapflex-wrap*

弹性

¥Flex

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

¥Use the flex prop to define the flexibility of a flex container or item.

<Flex>
  <Box flex="1" />
  <Box />
</Flex>
属性CSS 属性标记类别
flexflex*

弹性增长

¥Flex Grow

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

¥Use the flexGrow prop to set the flex grow factor of a flex item.

<Flex>
  <Box flexGrow="0" />
  <Box flexGrow="1" />
</Flex>
属性CSS 属性标记类别
flexGrowflex-grow*

弹性收缩

¥Flex Shrink

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

¥Use the flexShrink prop to set the flex shrink factor of a flex item.

<Flex>
  <Box flexShrink="0" />
  <Box flexShrink="1" />
</Flex>
属性CSS 属性标记类别
flexShrinkflex-shrink*

顺序

¥Order

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

¥Use the order prop to set the order of a flex item.

<Flex>
  <Box order="0" />
  <Box order="1" />
</Flex>
属性CSS 属性标记类别
orderorder*

间隙

¥Gap

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

¥Use the gap prop to set the gap between items in a flex or grid container.

<Flex gap="4">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Flex>
属性CSS 属性标记类别
gapgapspacing

网格模板列

¥Grid Template Columns

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

¥Use the gridTemplateColumns prop to define the columns of a grid container.

<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。

¥When using Grid component, the templateColumns prop is aliased to gridTemplateColumns.

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

网格模板起始/结束

¥Grid Template Start/End

使用 gridTemplateStart 和 gridTemplateEnd 属性定义网格容器的起点和终点。

¥Use the gridTemplateStart and gridTemplateEnd props to define the start and end of a grid container.

<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 属性标记类别
gridTemplateStartgrid-template-start*
gridTemplateEndgrid-template-end*

网格模板行

¥Grid Template Rows

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

¥Use the gridTemplateRows prop to define the rows of a grid container.

<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 属性标记类别
gridTemplateRowsgrid-template-rows*

网格行起始/结束

¥Grid Row Start/End

使用 gridRowStart 和 gridRowEnd 属性定义网格项的起点和终点。

¥Use the gridRowStart and gridRowEnd props to define the start and end of a grid item.

<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 属性标记类别
gridRowStartgrid-row-start*
gridRowEndgrid-row-end*

网格自动流

¥Grid Autoflow

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

¥Use the gridAutoFlow prop to define how auto-placed items get flowed into the grid.

<Box display="grid" gridAutoFlow="row">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>
属性CSS 属性标记类别
gridAutoFlowgrid-auto-flow*

网格自动列

¥Grid Auto Columns

使用 gridAutoColumns 属性指定未指定大小的网格列的大小。

¥Use the gridAutoColumns prop to specify the size of the grid columns that were created without an explicit size.

<Box display="grid" gridAutoColumns="120px">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>
属性CSS 属性标记类别
gridAutoColumnsgrid-auto-columns*

网格自动行

¥Grid Auto Rows

使用 gridAutoRows 属性指定未指定大小的网格行的大小。

¥Use the gridAutoRows prop to specify the size of the grid rows that were created without an explicit size.

<Box display="grid" gridTemplateRows="200px" gridAutoRows="120px">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>
属性CSS 属性标记类别
gridAutoRowsgrid-auto-rows*

内容对齐

¥Justify Content

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

¥Use the justifyContent prop to align items along the main axis of a flex container.

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

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

¥When using the Flex component, the justify prop is aliased to justifyContent.

<Flex justify="center">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Flex>
属性CSS 属性标记类别
justifyContentjustify-content*

项目对齐

¥Justify Items

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

¥Use the justifyItems prop to control the alignment of grid items within their scope.

<Box display="grid" justifyItems="center">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>
属性CSS 属性标记类别
justifyItemsjustify-items*

对齐内容

¥Align Content

当有额外空间时，使用 alignContent 属性可沿弹性容器的横轴对齐内容行。

¥Use the alignContent prop to align rows of content along the cross axis of a flex container when there's extra space.

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

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

¥When using the Flex component, the align prop is aliased to alignContent.

<Flex align="center">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Flex>
属性CSS 属性标记类别
alignContentalign-content*

对齐项目

¥Align Items

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

¥Use the alignItems prop to control the alignment of grid items within their scope.

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

对齐自身

¥Align Self

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

¥Use the alignSelf prop to control the alignment of a grid item within its scope.

<Box display="grid">
  <Box alignSelf="center">Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>
属性CSS 属性标记类别
alignSelfalign-self*

放置内容

¥Place Content

使用 placeContent 属性可同时沿块级和行内方向对齐内容。它的工作原理类似于 justifyContent 和 alignContent 的结合，并且可以在 flex 和 grid 容器中使用。

¥Use the placeContent prop to align content along both the block and inline directions at once. It works like justifyContent and alignContent combined, and can be used in flex and grid containers.

<Flex placeContent="center">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Flex>
属性CSS 属性标记类别
placeContentplace-content*

放置项目

¥Place Items

使用 placeItems 属性可同时沿块级和行内方向对齐项目。它的工作原理类似于 justifyItems 和 alignItems 的结合，并且可以在 flex 和 grid 容器中使用。

¥Use the placeItems prop to align items along both the block and inline directions at once. It works like justifyItems and alignItems combined, and can be used in flex and grid containers.

<Box display="grid" placeItems="center">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>
属性CSS 属性标记类别
placeItemsplace-items*

自身放置

¥Place Self

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

¥Use the placeSelf prop to align a grid item along both the block and inline directions at once.

<Box display="grid">
  <Box placeSelf="center">Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>
属性CSS 属性标记类别
placeSelfplace-self*

Previous

过滤器

Next

交互性