Flex

Flex is Box with display set to 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>

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

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

Since Spacer renders a div, any gap value provided to the parent is applied to both sides of this component, and therefore make the gap appear doubled when the spacer is completely collapsed.

The example below is not responsive on purpose as you might switch to a collapsed menu on mobile.

<Flex minWidth="max-content" alignItems="center" gap="2"> <Box p="2"> <Heading size="md">Chakra App</Heading> </Box> <Spacer /> <ButtonGroup gap="2"> <Button colorScheme="teal">Sign Up</Button> <Button colorScheme="teal">Log in</Button> </ButtonGroup> </Flex>

<Flex minWidth="max-content" alignItems="center" gap="2">
  <Box p="2">
    <Heading size="md">Chakra App</Heading>
  </Box>
  <Spacer />
  <ButtonGroup gap="2">
    <Button colorScheme="teal">Sign Up</Button>
    <Button colorScheme="teal">Log in</Button>
  </ButtonGroup>
</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"]