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.

Box 1

Box 2

Box 3

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

Editable Example

Using the Spacer#

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

Box 1

Box 2

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

Editable Example

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.

Flex and Spacer: Full width, equal Spacing

Grid: The children start at the beginning, the 1/3 mark and 2/3 mark

HStack: The children have equal spacing but don't span the whole container

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

Editable Example

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

Chakra App

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

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

Editable Example

Props#

Name	Type	Description	Default
align	`SystemProps["alignItems"]`	Shorthand for `alignItems` style prop	-
basis	`SystemProps["flexBasis"]`	Shorthand for `flexBasis` style prop	-
direction	`SystemProps["flexDirection"]`	Shorthand for `flexDirection` style prop	-
grow	`SystemProps["flexGrow"]`	Shorthand for `flexGrow` style prop	-
justify	`SystemProps["justifyContent"]`	Shorthand for `justifyContent` style prop	-
shrink	`SystemProps["flexShrink"]`	Shorthand for `flexShrink` style prop	-
wrap	`SystemProps["flexWrap"]`	Shorthand for `flexWrap` style prop	-

Edit this page