Flex

Used to manage flex layouts

AI TipWant to skip the docs? Use the MCP Server

Usage

import { Flex, Spacer } from "@chakra-ui/react"

<Flex>
  <div />
  <div />
</Flex>

Use the direction or flexDirection prop to change the direction of the flex

Use the align or alignItems prop to align the children along the cross axis.

Use the justify or justifyContent prop to align the children along the main axis.

flex-start

center

flex-end

space-between

Use the order prop to change the order of the children.

Apply margin to a flex item to push it away from its siblings.

Use the Spacer component to create flexible space between flex items. It will expand to fill all available space, pushing items to opposite ends.

Box 1

Box 2

Use the wrap or flexWrap prop to wrap the children when they overflow the parent.

Prop	Default	Type
`align`		`SystemStyleObject['alignItems'] \| undefined`
`justify`		`SystemStyleObject['justifyContent'] \| undefined`
`wrap`		`SystemStyleObject['flexWrap'] \| undefined`
`direction`		`SystemStyleObject['flexDirection'] \| undefined`
`basis`		`SystemStyleObject['flexBasis'] \| undefined`
`grow`		`SystemStyleObject['flexGrow'] \| undefined`
`shrink`		`SystemStyleObject['flexShrink'] \| undefined`
`inline`		`boolean \| undefined`
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.