Flex

Flex is Box with display: flex and comes with helpful style shorthand. It renders a div element.

Import#

import { Flex, Spacer } from '@chakra-ui/react'
  • Flex: A Box with display: flex.
  • Spacer: Creates an adjustable, empty space that can be used to tune the spacing between child elements within Flex.

Usage#

Using the Flex components, here are some helpful shorthand props:

  • flexDirection is direction
  • flexWrap is wrap
  • flexBasis is basis
  • flexGrow is grow
  • flexShrink is shrink
  • alignItems is align
  • justifyContent is justify

While you can pass the verbose props, using the shorthand can save you some time.

<Flex color='white'>
<Center w='100px' bg='green.500'>
<Text>Box 1</Text>
</Center>
<Square bg='blue.500' size='150px'>
<Text>Box 2</Text>
</Square>
<Box flex='1' bg='tomato'>
<Text>Box 3</Text>
</Box>
</Flex>

Using the Spacer#

As an alternative to Stack, you can combine Flex and Spacer to create stackable and responsive layouts.

<Flex>
<Box p='4' bg='red.400'>
Box 1
</Box>
<Spacer />
<Box p='4' bg='green.400'>
Box 2
</Box>
</Flex>

Flex and Spacer vs Grid vs Stack#

The Flex and Spacer components, Grid and HStack treat children of different widths differently.

  • In HStack, the children will have equal spacing between them but they won't span the entire width of the container.
  • In Grid, the starting points of the children will be equally spaced but the gaps between them will not be equal.
  • With Flex and Spacer, the children will span the entire width of the container and also have equal spacing between them.
<Box>
<Text>Flex and Spacer: Full width, equal Spacing</Text>
<Flex>
<Box w='70px' h='10' bg='red.500' />
<Spacer />
<Box w='170px' h='10' bg='red.500' />
<Spacer />
<Box w='180px' h='10' bg='red.500' />
</Flex>
<Text>
Grid: The children start at the beginning, the 1/3 mark and 2/3 mark
</Text>
<Grid templateColumns='repeat(3, 1fr)' gap={6}>
<Box w='70px' h='10' bg='blue.500' />
<Box w='170px' h='10' bg='blue.500' />
<Box w='180px' h='10' bg='blue.500' />
</Grid>
<Text>
HStack: The children have equal spacing but don't span the whole container
</Text>
<HStack spacing='24px'>
<Box w='70px' h='10' bg='teal.500' />
<Box w='170px' h='10' bg='teal.500' />
<Box w='180px' h='10' bg='teal.500' />
</HStack>
</Box>

A good use case for Spacer is to create a navbar with a signup/login button aligned to the right.

<Flex>
<Box p='2'>
<Heading size='md'>Chakra App</Heading>
</Box>
<Spacer />
<Box>
<Button colorScheme='teal' mr='4'>
Sign Up
</Button>
<Button colorScheme='teal'>Log in</Button>
</Box>
</Flex>

Props#

align

Description

Shorthand for alignItems style prop

Type
SystemProps["alignItems"]

basis

Description

Shorthand for flexBasis style prop

Type
SystemProps["flexBasis"]

direction

Description

Shorthand for flexDirection style prop

Type
SystemProps["flexDirection"]

grow

Description

Shorthand for flexGrow style prop

Type
SystemProps["flexGrow"]

justify

Description

Shorthand for justifyContent style prop

Type
SystemProps["justifyContent"]

shrink

Description

Shorthand for flexShrink style prop

Type
SystemProps["flexShrink"]

wrap

Description

Shorthand for flexWrap style prop

Type
SystemProps["flexWrap"]

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel