Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsPlaygroundGuidesBlog
Sponsor

Flex

Used to manage flex layouts

Source

Usage

import { Flex } from "@chakra-ui/react"
<Flex>
  <div />
  <div />
</Flex>

Examples

Direction

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

Align

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

Justify

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

flex-start
center
flex-end
space-between

Order

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

1
2
3

Auto Margin

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

Wrap

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

Props

PropDefaultType
align
SystemStyleObject['alignItems']

justify
SystemStyleObject['justifyContent']

wrap
SystemStyleObject['flexWrap']

direction
SystemStyleObject['flexDirection']

basis
SystemStyleObject['flexBasis']

grow
SystemStyleObject['flexGrow']

shrink
SystemStyleObject['flexShrink']

inline
boolean

Previous

Container

Next

Float