Flex and Grid

JSX style props to control flex and grid layouts

Flex Basis

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>

Prop	CSS Property	Token Category
`flexBasis`	`flex-basis`	-

Flex Direction

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>

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>

Prop	CSS Property	Token Category
`flexDir`, `flexDirection`	`flex-direction`	-

Flex Wrap

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>

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>

Prop	CSS Property	Token Category
`flexWrap`	`flex-wrap`	-

Flex

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

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

Prop	CSS Property	Token Category
`flex`	`flex`	-

Flex Grow

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

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

Prop	CSS Property	Token Category
`flexGrow`	`flex-grow`	-

Flex Shrink

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

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

Prop	CSS Property	Token Category
`flexShrink`	`flex-shrink`	-

Order

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

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

Prop	CSS Property	Token Category
`order`	`order`	-

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>

Prop	CSS Property	Token Category
`gap`	`gap`	`spacing`

Grid Template Columns

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>

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

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>

Prop	CSS Property	Token Category
`gridTemplateStart`	`grid-template-start`	-
`gridTemplateEnd`	`grid-template-end`	-

Grid Template Rows

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>

Prop	CSS Property	Token Category
`gridTemplateRows`	`grid-template-rows`	-

Grid Row Start/End

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>

Prop	CSS Property	Token Category
`gridRowStart`	`grid-row-start`	-
`gridRowEnd`	`grid-row-end`	-

Grid Autoflow

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>

Prop	CSS Property	Token Category
`gridAutoFlow`	`grid-auto-flow`	-

Grid Auto Columns

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>

Prop	CSS Property	Token Category
`gridAutoColumns`	`grid-auto-columns`	-

Grid Auto Rows

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>

Prop	CSS Property	Token Category
`gridAutoRows`	`grid-auto-rows`	-

Justify Content

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>

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>

Prop	CSS Property	Token Category
`justifyContent`	`justify-content`	-

Justify Items

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>

Prop	CSS Property	Token Category
`justifyItems`	`justify-items`	-

Align Content

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>

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>

Prop	CSS Property	Token Category
`alignContent`	`align-content`	-

Align Items

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

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>

Prop	CSS Property	Token Category
`alignSelf`	`align-self`	-

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>

Prop	CSS Property	Token Category
`placeContent`	`place-content`	-

Place Items

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>

Prop	CSS Property	Token Category
`placeItems`	`place-items`	-

Place Self

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>

Prop	CSS Property	Token Category
`placeSelf`	`place-self`	-

Flex and 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