Flex

Import

JSX

import Flex from '@box-kite/react/components/flex';

Basic Flex

Item 1

Item 2

Item 3

JSX

Playground

<Flex gap={4} ai="center">
  <Box p={4} bgColor="violet-400" borderRadius={1} color="white">Item 1</Box>
  <Box p={4} bgColor="violet-500" borderRadius={1} color="white">Item 2</Box>
  <Box p={4} bgColor="violet-600" borderRadius={1} color="white">Item 3</Box>
</Flex>

Column Direction

Row 1

Row 2

Row 3

JSX

Playground

<Flex d="column" gap={4}>
  <Box p={4} bgColor="indigo-400" borderRadius={1} color="white">Row 1</Box>
  <Box p={4} bgColor="indigo-500" borderRadius={1} color="white">Row 2</Box>
  <Box p={4} bgColor="indigo-600" borderRadius={1} color="white">Row 3</Box>
</Flex>

Justify Content

Start

Middle

End

JSX

Playground

<Flex jc="space-between" ai="center" p={4} bgColor="slate-100" borderRadius={1}>
  <Box p={3} bgColor="emerald-500" borderRadius={1} color="white">Start</Box>
  <Box p={3} bgColor="emerald-500" borderRadius={1} color="white">Middle</Box>
  <Box p={3} bgColor="emerald-500" borderRadius={1} color="white">End</Box>
</Flex>

Flex Wrap

1

2

3

4

5

6

JSX

Playground

<Flex gap={4} flexWrap="wrap">
  {[1, 2, 3, 4, 5, 6].map(i => (
    <Box key={i} p={4} width={24} bgColor="sky-500" borderRadius={1} color="white" textAlign="center">
      {i}
    </Box>
  ))}
</Flex>

Flex props

Everything below is this component’s own. All 235 of Box’s style props work on it too, and those are on /box rather than repeated here.

Flex adds no props of its own — it is a Box with one thing decided for it.

Flex props

Flex accessibility