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

<Flex>
<Box p="2">
<Heading size="md">Vision UI Dashboard</Heading>
</Box>
<Spacer />
<Box>
<Button
bg="#582CFF"
color="white"
_hover={{ bg: "#704cf5" }}
_active={{ bg: "#351a99" }}
mr="4"
>
Sign Up
</Button>
<Button
bg="#582CFF"
color="white"
_hover={{ bg: "#704cf5" }}
_active={{ bg: "#351a99" }}
>
Log in
</Button>
</Box>
</Flex>
<Flex>
<Box p="2">
<Heading size="md">Vision UI Dashboard</Heading>
</Box>
<Spacer />
<Box>
<Button
bg="#582CFF"
color="white"
_hover={{ bg: "#704cf5" }}
_active={{ bg: "#351a99" }}
mr="4"
>
Sign Up
</Button>
<Button
bg="#582CFF"
color="white"
_hover={{ bg: "#704cf5" }}
_active={{ bg: "#351a99" }}
>
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"]

© 2021, Made with ❤️ by Creative Tim & Simmmple for a better web

  • Creative Tim
  • Simmmple
  • Blog
  • License