Layout

Flex

Import

ts
import { Flex, Spacer } from "@hope-ui/core";

ts
import { Flex, Spacer } from "@hope-ui/core";

Flex: A Box with display: flex.
Spacer: An adjustable empty space, used to tune the spacing between elements within Flex.

Usage

Box 1

Box 2

Box 3

tsx
<Flex color="white">
  <Center w="100px" bg="mediumseagreen">
    <Text>Box 1</Text>
  </Center>
  <Center boxSize="150px" bg="dodgerblue">
    <Text>Box 2</Text>
  </Center>
  <Center flex="1" bg="tomato">
    <Text>Box 3</Text>
  </Center>
</Flex>

tsx
<Flex color="white">
  <Center w="100px" bg="mediumseagreen">
    <Text>Box 1</Text>
  </Center>
  <Center boxSize="150px" bg="dodgerblue">
    <Text>Box 2</Text>
  </Center>
  <Center flex="1" bg="tomato">
    <Text>Box 3</Text>
  </Center>
</Flex>

Using the Spacer

The Spacer component can be used to fill available space between elements.

Box 1

Box 2

tsx
<Flex color="white">
  <Box p={4} bg="mediumseagreen">
    Box 1
  </Box>
  <Spacer />
  <Box p={4} bg="dodgerblue">
    Box 2
  </Box>
</Flex>

tsx
<Flex color="white">
  <Box p={4} bg="mediumseagreen">
    Box 1
  </Box>
  <Spacer />
  <Box p={4} bg="dodgerblue">
    Box 2
  </Box>
</Flex>

Shorthand properties

While you can pass the verbose props, Flex allows to use some helpful shorthand:

flexDirection -> direction
flexWrap -> wrap
alignItems -> align
justifyContent -> justify

Flex vs Grid vs Stack

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

With Flex and Spacer, the children will cover the entire width of the container and also have equal spacing between them.
With Grid, the starting points of the children will be equally spaced but the gaps between them will not be equal.
With HStack, the children will have equal spacing between them, but they won't span the entire width of the container.

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

tsx
<Box>
  <Text>Flex and Spacer: Full width, equal spacing</Text>
  <Flex mb={4}>
    <Box w="70px" h={10} bg="mediumseagreen" />
    <Spacer />
    <Box w="170px" h={10} bg="mediumseagreen" />
    <Spacer />
    <Box w="180px" h={10} bg="mediumseagreen" />
  </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} mb={4}>
    <Box w="70px" h={10} bg="dodgerblue" />
    <Box w="170px" h={10} bg="dodgerblue" />
    <Box w="180px" h={10} bg="dodgerblue" />
  </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="tomato" />
    <Box w="170px" h={10} bg="tomato" />
    <Box w="180px" h={10} bg="tomato" />
  </HStack>
</Box>

tsx
<Box>
  <Text>Flex and Spacer: Full width, equal spacing</Text>
  <Flex mb={4}>
    <Box w="70px" h={10} bg="mediumseagreen" />
    <Spacer />
    <Box w="170px" h={10} bg="mediumseagreen" />
    <Spacer />
    <Box w="180px" h={10} bg="mediumseagreen" />
  </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} mb={4}>
    <Box w="70px" h={10} bg="dodgerblue" />
    <Box w="170px" h={10} bg="dodgerblue" />
    <Box w="180px" h={10} bg="dodgerblue" />
  </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="tomato" />
    <Box w="170px" h={10} bg="tomato" />
    <Box w="180px" h={10} bg="tomato" />
  </HStack>
</Box>

Props

Name	Type	Description
direction	`ResponsiveValue<Property.FlexDirection>`	Shorthand for `flexDirection` style prop.
wrap	`ResponsiveValue<Property.FlexWrap>`	Shorthand for `flexWrap` style prop.
align	`ResponsiveValue<Property.AlignItems>`	Shorthand for `alignItems` style prop.
justify	`ResponsiveValue<Property.JustifyContent>`	Shorthand for `justifyContent` style prop.