# Flex

_Box Kite 2.2.6 · a markdown copy of https://www.box-kite.dev/flex/_

A shortcut component for display: flex with alignment and spacing props.

**Import**

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

**Basic Flex**

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

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

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

```jsx
<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](https://www.box-kite.dev/box.md) rather than repeated here.

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

## Flex accessibility

- A `<div>` unless `tag` says otherwise, and flex order is *visual* order: reordering items with `order` or `flexDirection="row-reverse"` leaves the tab order and the reading order where the markup put them, which is a WCAG 1.3.2 failure waiting to happen.

Swept with axe on every release, in this state: `Flex`. No violations, with contrast and landmark rules left to a human. Screen-reader results are not published yet.

---

_Every page: https://www.box-kite.dev/llms.txt · every prop, measured: https://www.box-kite.dev/props.md_