---
id: flex
category: layout
title: Flex
package: '@chakra-ui/layout'
description:
  Flex is Box with display set to flex and comes with helpful style shorthand.
  It renders a `div` element.
---

## Import

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

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

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

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

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