> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.

# Flex

A flex container with the properties as props — `direction`, `justify`, `align`, `wrap`, plus `basis` fractions and `grow` / `shrink` for how the children size themselves. Reach for `Stack`, or `HStack` / `VStack`, when all you want is a spaced list in one direction: `Stack` carries a default gap where `Flex` has none. `Flex` takes no `className`, so everything goes through props.

[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/Flex) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/layout-flex--overview)

```tsx
import { Flex } from '@wallarm-org/design-system/Flex';

export const Basic = () => (
  <Flex gap={4}>
    <Box>A</Box>
    <Box>B</Box>
    <Box>C</Box>
  </Flex>
);
```

## Usage

```tsx
import { Flex } from '@wallarm-org/design-system/Flex';
```

## Examples

### Direction

`row`, `column` and `row-reverse`. Reverse changes the paint order without touching the DOM order, so it moves the visual sequence away from the tab order — use it sparingly.

```tsx
import { Flex } from '@wallarm-org/design-system/Flex';
import { VStack } from '@wallarm-org/design-system/Stack';

export const Direction = () => (
  <Flex direction='column' gap={8}>
    <VStack>
      <Flex direction='row' gap={2}>
        <Box className='h-32 py-2 px-4 text-sm'>1</Box>
        <Box className='h-32 py-2 px-4 text-sm'>2</Box>
        <Box className='h-32 py-2 px-4 text-sm'>3</Box>
      </Flex>
    </VStack>
    <VStack>
      <Flex direction='column' gap={2}>
        <Box className='h-32 py-2 px-4 text-sm'>1</Box>
        <Box className='h-32 py-2 px-4 text-sm'>2</Box>
        <Box className='h-32 py-2 px-4 text-sm'>3</Box>
      </Flex>
    </VStack>
    <VStack>
      <Flex direction='row-reverse' gap={2}>
        <Box className='h-32 py-2 px-4 text-sm'>1</Box>
        <Box className='h-32 py-2 px-4 text-sm'>2</Box>
        <Box className='h-32 py-2 px-4 text-sm'>3</Box>
      </Flex>
    </VStack>
  </Flex>
);
```

### Alignment

`justify` distributes along the main axis, and needs `fullWidth` (or a sized parent) to have any room to distribute in.

```tsx
import { Flex } from '@wallarm-org/design-system/Flex';
import { VStack } from '@wallarm-org/design-system/Stack';

export const Alignment = () => (
  <Flex direction='column' gap={8}>
    <VStack>
      <Flex justify='start' fullWidth>
        <Box className='h-16 w-16 text-xs'>A</Box>
        <Box className='h-16 w-16 text-xs'>B</Box>
      </Flex>
    </VStack>
    <VStack>
      <Flex justify='center' fullWidth>
        <Box className='h-16 w-16 text-xs'>A</Box>
        <Box className='h-16 w-16 text-xs'>B</Box>
      </Flex>
    </VStack>
    <VStack>
      <Flex justify='between' fullWidth>
        <Box className='h-16 w-16 text-xs'>A</Box>
        <Box className='h-16 w-16 text-xs'>B</Box>
      </Flex>
    </VStack>
  </Flex>
);
```

### Wrap

`wrap` lets the row break onto more lines once it runs out of width, which is what keeps a long row of chips or tags from overflowing.

```tsx
import { Flex } from '@wallarm-org/design-system/Flex';
import { VStack } from '@wallarm-org/design-system/Stack';

export const Wrap = () => (
  <VStack>
    <Flex wrap='wrap' gap={2} fullWidth>
      {new Array(40).fill(null).map((_, index) => {
        const key = `${index + 1}`;
        return (
          <Box className='h-20 w-20 text-xs' key={key}>
            {key}
          </Box>
        );
      })}
    </Flex>
  </VStack>
);
```

### Grow shrink

How the children behave when the space does not fit: growing to fill it, or shrinking to survive it. `basis` is the third lever, for a child that should start at a fraction of the row.

```tsx
import { Flex } from '@wallarm-org/design-system/Flex';
import { VStack } from '@wallarm-org/design-system/Stack';

export const GrowShrink = () => (
  <Flex direction='column' gap={8}>
    <VStack>
      <Flex fullWidth>
        <Box className='h-16 flex-1 text-xs'>Flex-1</Box>
        <Box className='h-16 flex-1 text-xs'>Flex-1</Box>
        <Box className='h-16 text-xs'>Fixed</Box>
      </Flex>
    </VStack>
    <VStack>
      <Flex fullWidth>
        <Box className='h-16 flex-shrink text-xs'>Shrinkable long content</Box>
        <Box className='h-16 flex-shrink-0 text-xs'>No shrink</Box>
      </Flex>
    </VStack>
  </Flex>
);
```

## Props

| Prop           | Type                                                                                               | Default   | Description |
| -------------- | -------------------------------------------------------------------------------------------------- | --------- | ----------- |
| title          | `string \| undefined`                                                                              |           |             |
| defaultChecked | `boolean \| undefined`                                                                             |           |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined`                                               |           |             |
| autoFocus      | `boolean \| undefined`                                                                             |           |             |
| id             | `string \| undefined`                                                                              |           |             |
| tabIndex       | `number \| undefined`                                                                              |           |             |
| rel            | `string \| undefined`                                                                              |           |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`                                                      |           |             |
| align          | `{ start: string; center: string; end: string; stretch: string; baseline: string; }`               | `stretch` |             |
| inline         | `{ true: string; false: string; }`                                                                 | `false`   |             |
| grow           | `{ true: string; false: string; }`                                                                 |           |             |
| fullWidth      | `{ true: string; }`                                                                                |           |             |
| wrap           | `{ wrap: string; nowrap: string; reverse: string; }`                                               | `nowrap`  |             |
| direction      | `{ row: string; column: string; 'row-reverse': string; 'column-reverse': string; }`                | `row`     |             |
| justify        | `{ start: string; center: string; end: string; between: string; around: string; evenly: string; }` | `start`   |             |
| gap            | `complex`                                                                                          |           |             |
| shrink         | `{ true: string; false: string; }`                                                                 |           |             |
| basis          | `complex`                                                                                          |           |             |
| data-testid    | `string \| undefined`                                                                              |           |             |
| asChild        | `boolean \| undefined`                                                                             | `false`   |             |